/* ==========================================================================================
   screens/lobby.css — mode cards (独立/同盟/无限火力), difficulty cards, create button, join panel.
   ========================================================================================== */

.lobby-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .3rem;
  width: 100%;
  max-width: 19.2rem;
  margin: 0 auto;
  padding: .36rem .6rem .4rem;
  align-content: start;
}
.lobby-left, .lobby-right { display: flex; flex-direction: column; min-width: 0; }
.lobby-mode { grid-column: 1 / -1; min-width: 0; }
.lobby-left { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .12rem .4rem; }
.lobby-left > .section-label:first-child { grid-column: 1; grid-row: 1; }
.lobby-left > .matchmaking-panel { grid-column: 1; grid-row: 2; margin-bottom: 0; }
.lobby-left > .lobby-join-label { grid-column: 2; grid-row: 1; }
.lobby-left > .join-panel { grid-column: 2; grid-row: 2; }
.lobby-left > .tips { grid-column: 1 / -1; }
.lobby-right { grid-column: 1; grid-row: 2; }
.lobby-right .diff-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .18rem; }
.lobby-right .diff-card { padding: .18rem .2rem .16rem .28rem; gap: .1rem .14rem; }
.lobby-right .diff-card__head { flex-wrap: wrap; gap: .06rem .08rem; }
.lobby-right .diff-card__meta { flex-basis: 100%; margin-left: .36rem; }
.lobby-right .diff-card__name { font-size: calc(.24 * var(--t)); }
.lobby-right .diff-card__effects { gap: .03rem .14rem; }
.lobby-right .diff-card__check .icon { width: .35rem; height: .35rem; padding: .06rem; }
.lobby-right .create-box { align-items: center; margin-top: .22rem; }
.lobby-right .create-box > .tt-anchor { width: min(7rem, 100%); }
.lobby-right .create-box .btn--xl { height: .72rem; font-size: calc(.28 * var(--t)); }

/* ---- mode cards ------------------------------------------------------------------------------------ */
.lobby-mode .mode-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .24rem; margin-bottom: 0; }

.mode-beta {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: .025rem .09rem;
  border: 1px solid rgba(255, 198, 0, .6);
  background: rgba(255, 198, 0, .12);
  color: var(--gold);
  font-size: calc(.13 * var(--t));
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.35;
}
.mode-card__name-row { display: flex; align-items: center; flex-wrap: wrap; gap: .13rem; }

.firepower-brief {
  --bk-c: var(--gold-2);
  --bk-l: .16rem;
  margin-top: .2rem;
  padding: .19rem .26rem;
  border: 1px solid rgba(255, 198, 0, .3);
  background: linear-gradient(110deg, rgba(255, 198, 0, .065), rgba(14, 20, 17, .9));
}
.firepower-brief__head { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .14rem; margin-bottom: .13rem; }
.firepower-brief__title { color: var(--gold); font-size: calc(.2 * var(--t)); font-weight: 800; }
.firepower-brief__hint { color: var(--text-lo); font-size: calc(.15 * var(--t)); margin-left: auto; }

.firepower-variants { display: flex; flex-wrap: wrap; gap: .12rem; margin-bottom: .14rem; }
.firepower-variant {
  flex: 1; min-width: 2.4rem; padding: .1rem .16rem; border: 1px solid rgba(255, 198, 0, .2);
  border-radius: 6px; background: rgba(14, 20, 17, .8); cursor: pointer; text-align: left;
  transition: border-color .12s ease, background .12s ease;
}
.firepower-variant:hover { border-color: rgba(255, 198, 0, .5); }
.firepower-variant.is-selected { border-color: var(--gold); background: linear-gradient(110deg, rgba(255, 198, 0, .1), rgba(14, 20, 17, .9)); }
.firepower-variant__name { display: block; font-weight: 700; font-size: calc(.17 * var(--t)); color: var(--gold); }
.firepower-variant__en { margin-left: .08rem; font-size: calc(.11 * var(--t)); font-weight: 400; color: var(--text-lo); text-transform: uppercase; letter-spacing: .04em; }
.firepower-variant__desc { display: block; margin-top: .04rem; font-size: calc(.13 * var(--t)); color: var(--text-lo); line-height: 1.5; }

.firepower-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .2rem; }
.firepower-feature { min-width: 0; }
.firepower-feature strong { color: var(--text-hi); font-size: calc(.17 * var(--t)); font-weight: 700; }
.firepower-feature p { margin: .04rem 0 0; color: var(--text-lo); font-size: calc(.15 * var(--t)); line-height: 1.65; }

/* ---- Legacy room selector styles, retained for older room components ------------------------------ */
.rm-sel-label { display: flex; align-items: baseline; gap: .14rem; margin-bottom: .12rem; }
.rm-sel { display: grid; grid-template-columns: 1fr 1fr; gap: .24rem; margin-bottom: .34rem; }
.rm-sel__opt {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  min-height: 2.5rem;
  padding: .28rem .32rem .24rem;
  text-align: left;
  background: linear-gradient(180deg, rgba(28, 34, 31, .92), rgba(13, 16, 15, .94));
  border: 1px solid var(--line);
  color: var(--text-lo);
  transition: border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-med), background-color var(--t-fast);
}
.rm-sel__opt .icon { width: .34rem; height: .34rem; color: var(--line-3); transition: color var(--t-fast), filter var(--t-fast); }
.rm-sel__opt:hover:not(:disabled) { color: var(--text-hi); border-color: var(--line-3); }
.rm-sel__opt:hover:not(:disabled) .icon { color: var(--text-hi); }
.rm-sel__opt:disabled { cursor: default; }
.rm-sel__opt.is-active { color: var(--text-hi); border-color: var(--mint-400); box-shadow: 0 0 .16rem rgba(23, 249, 183, .22) inset; }
.rm-sel__opt.is-active .icon { color: var(--mint-400); filter: drop-shadow(0 0 5px var(--mint-glow)); }
.rm-sel__opt--random.is-active { border-color: var(--gold); box-shadow: 0 0 .16rem rgba(255, 198, 0, .2) inset; }
.rm-sel__opt--random.is-active .icon { color: var(--gold); filter: drop-shadow(0 0 5px rgba(255, 198, 0, .45)); }
.rm-sel__name { font-size: calc(.24 * var(--t)); font-weight: 800; letter-spacing: .1em; }
.rm-sel__desc { font-size: calc(.15 * var(--t)); color: var(--text-dim); letter-spacing: .06em; }

.rm-note { margin: .1rem 0 .06rem; font-size: calc(.17 * var(--t)); line-height: 1.5; color: var(--text-lo); }

/* the 无限火力 tag of a room card in the multiplayer modal (server room.view.random) */
.mm-room-rm {
  padding: .02rem .08rem;
  border: 1px solid var(--mint-700); border: 1px solid color-mix(in srgb, var(--mint-400) 55%, transparent);
  background: rgba(23, 249, 183, .12); background: color-mix(in srgb, var(--mint-400) 12%, transparent);
  color: var(--mint-400);
  font-size: calc(.14 * var(--t));
  font-weight: 700;
  letter-spacing: .1em;
  border-radius: 2px;
}

.mode-card {
  --bk-c: transparent;
  --bk-l: .2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .22rem;
  min-height: 2.72rem;
  padding: .26rem .3rem .24rem 1.34rem;
  overflow: hidden;
  text-align: left;
  background: linear-gradient(180deg, rgba(28, 34, 31, .92), rgba(13, 16, 15, .94));
  border: 1px solid var(--line);
  color: var(--text-hi);
  transition: border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), transform var(--t-fast) var(--ease-out);
  animation: card-in var(--t-slow) var(--ease-out) backwards;
}
.mode-card:nth-child(2) { animation-delay: 60ms; }
.mode-card:nth-child(3) { animation-delay: 120ms; }
.mode-card__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 100% 0%, rgba(78, 216, 175, .10), transparent 70%),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 12px),
    linear-gradient(transparent 70%, rgba(0, 0, 0, .35));
  transition: opacity var(--t-med);
}
.mode-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mint-500), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}
.mode-card__icon {
  position: absolute;
  top: .32rem;
  left: .28rem;
  width: .88rem;
  height: .88rem;
  display: grid;
  place-items: center;
  background: #0c0f0e;
  border: 1px solid var(--line-2);
  color: var(--text-md);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  transition: background var(--t-med), color var(--t-med);
}
.mode-card__icon .icon { width: .44rem; height: .44rem; }
.mode-card__text { position: relative; display: flex; flex-direction: column; gap: .1rem; }
.mode-card__name { font-size: calc(.38 * var(--t)); font-weight: 900; letter-spacing: .08em; line-height: 1.15; }
.mode-card__desc { font-size: calc(.17 * var(--t)); color: var(--text-lo); line-height: 1.65; max-width: 3.6rem; }
.mode-card__points { display: flex; flex-direction: column; gap: .05rem; margin-top: .06rem; font-size: calc(.15 * var(--t)); color: var(--text-md); }
.mode-card__points span::before {
  content: '';
  display: inline-block;
  width: .06rem;
  height: .06rem;
  margin: 0 .1rem .02rem 0;
  background: var(--mint-700);
  transform: rotate(45deg);
  vertical-align: middle;
}
.mode-card__check {
  position: absolute;
  bottom: .25rem;
  left: .28rem;
  display: flex;
  align-items: center;
  gap: .05rem;
  padding: .04rem .12rem .04rem .08rem;
  background: var(--mint-500);
  color: var(--text-on-mint);
  font-size: calc(.14 * var(--t));
  font-weight: 700;
  opacity: 0;
  transform: translateY(-.06rem);
  transition: opacity var(--t-med), transform var(--t-med) var(--ease-out);
}
.mode-card__check .icon { width: .16rem; height: .16rem; }
.mode-card:hover { border-color: var(--line-3); --bk-c: var(--line-3); }
.mode-card:active { transform: translateY(1px); }
.mode-card.is-selected {
  --bk-c: var(--mint-400);
  border-color: var(--mint-700);
  box-shadow: 0 0 0 1px rgba(78, 216, 175, .22), 0 0 .44rem rgba(23, 249, 183, .13), inset 0 0 .7rem rgba(23, 249, 183, .05);
}
.mode-card.is-selected::before { transform: scaleX(1); }
.mode-card.is-selected .mode-card__icon { background: var(--mint-500); border-color: var(--mint-400); color: var(--text-on-mint); }
.mode-card.is-selected .mode-card__check { opacity: 1; transform: none; }
.mode-card--firepower .mode-card__bg { background: radial-gradient(85% 65% at 100% 0%, rgba(255, 198, 0, .11), transparent 70%), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 12px); }
.mode-card--firepower .mode-card__icon { color: var(--gold-2); }
.mode-card--firepower::before { background: linear-gradient(90deg, var(--gold), transparent); }
.mode-card--firepower.is-selected { --bk-c: var(--gold); border-color: var(--gold-2); box-shadow: 0 0 0 1px rgba(255, 198, 0, .2), 0 0 .3rem rgba(255, 198, 0, .1), inset 0 0 .6rem rgba(255, 198, 0, .04); }
.mode-card--firepower.is-selected .mode-card__icon, .mode-card--firepower.is-selected .mode-card__check { background: var(--gold); color: #181405; border-color: var(--gold-2); }

/* Full-width protocol choices stay readable when the root scale reaches its mobile floor. */
@media (max-width: 900px) {
  .lobby-mode .mode-card { padding-left: 1.1rem; }
  .lobby-mode .mode-card__icon { left: .22rem; width: .66rem; height: .66rem; }
  .lobby-mode .mode-card__name { font-size: calc(.34 * var(--t)); }
  .lobby-mode .mode-card__desc { font-size: calc(.18 * var(--t)); }
  .lobby-mode .mode-card__points { font-size: calc(.16 * var(--t)); }
  .firepower-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .16rem .26rem; }
  .lobby-right .diff-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lobby-right .diff-card__head { flex-wrap: nowrap; }
  .lobby-right .diff-card__meta { flex-basis: auto; margin-left: auto; }
  .lobby-left { display: flex; }
  .lobby-left > .matchmaking-panel { margin-bottom: .22rem; }
}
@media (max-height: 460px) and (min-width: 641px) {
  .lobby-mode .mode-card { min-height: 0; padding: .24rem .22rem .22rem 1.05rem; }
  .lobby-mode .mode-card__name { font-size: calc(.34 * var(--t)); }
  .lobby-mode .mode-card__check { bottom: .18rem; left: .22rem; font-size: calc(.12 * var(--t)); padding: .03rem .06rem; }
  .firepower-brief { padding: .16rem .2rem; }
  .firepower-features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lobby-right .diff-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lobby-right .diff-card__head { flex-wrap: wrap; }
  .lobby-right .diff-card__meta { flex-basis: 100%; margin-left: .36rem; }
}
@media (max-width: 640px) {
  .lobby-screen .lobby-body { grid-template-columns: minmax(0, 1fr); gap: .3rem; padding: .26rem .3rem .4rem; }
  .lobby-mode { grid-column: 1; }
  .lobby-right { grid-column: 1; grid-row: 2; }
  .lobby-left { grid-column: 1; grid-row: 3; }
  .lobby-mode .mode-cards { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .lobby-mode .mode-card { min-height: 0; padding: .25rem .26rem .24rem 1.18rem; }
  .lobby-mode .mode-card__icon { top: .3rem; }
  .lobby-mode .mode-card__name { font-size: max(calc(.34 * var(--t)), 18px); }
  .lobby-mode .mode-card__desc { font-size: max(calc(.18 * var(--t)), 11px); max-width: none; }
  .lobby-mode .mode-card__points { display: flex; font-size: max(calc(.15 * var(--t)), 10px); }
  .lobby-mode .mode-card__check { bottom: .2rem; left: .22rem; }
  .lobby-mode .mode-card__text { padding-top: .03rem; }
  .firepower-brief__hint { margin-left: 0; width: 100%; font-size: max(calc(.15 * var(--t)), 10px); }
  .firepower-feature strong { font-size: max(calc(.17 * var(--t)), 11px); }
  .firepower-feature p { font-size: max(calc(.15 * var(--t)), 10px); }
  .mode-beta { font-size: max(calc(.13 * var(--t)), 9px); }
  .lobby-right .diff-card__head { flex-wrap: wrap; }
  .lobby-right .diff-card__meta { flex-basis: 100%; margin-left: .36rem; }
  .lobby-right .diff-card__name { font-size: max(calc(.22 * var(--t)), 12px); }
  .lobby-right .diff-card__desc { font-size: max(calc(.16 * var(--t)), 10px); line-height: 1.5; }
  .lobby-right .diff-card__effects { display: flex; font-size: max(calc(.14 * var(--t)), 9px); }
  .lobby-right .diff-card__check { display: none; }
  .lobby-right .diff-card__meta { font-size: max(calc(.14 * var(--t)), 9px); }
  .lobby-right .diff-card__meta .num { font-size: max(calc(.17 * var(--t)), 10px); }
  .lobby-right .create-box { width: 100%; }
  .lobby-right .create-box .btn--xl { font-size: max(calc(.28 * var(--t)), 16px); height: max(.72rem, 40px); }
  .matchmaking-panel { flex-wrap: wrap; }
  .join-row { flex-wrap: wrap; }
  .join-row .field { flex-basis: 100%; }
}
@keyframes card-in { from { opacity: 0; transform: translateY(.14rem); } }

/* ---- join panel ------------------------------------------------------------------------------------ */
.join-panel .panel__body { display: flex; flex-direction: column; gap: .14rem; padding: .22rem .26rem .18rem; }
.join-row { display: flex; gap: .16rem; align-items: stretch; }
.join-row .field { flex: 1; }
.join-row .btn { height: .64rem; }
.join-foot { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem; min-height: .32rem; font-size: calc(.14 * var(--t)); }
.code-chip {
  padding: .03rem .12rem .03rem .16rem;
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, .3);
  color: var(--amber);
  font-size: calc(.17 * var(--t));
  font-weight: 700;
  letter-spacing: .2em;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.code-chip:hover { border-color: var(--amber); background: rgba(246, 163, 41, .08); }

/* ---- tips -------------------------------------------------------------------------------------------- */
.tips {
  --bk-c: var(--line-3);
  margin-top: .3rem;
  padding: .16rem .22rem .2rem;
  background: rgba(8, 10, 9, .55);
  border: 1px solid var(--line);
}
.tips__head { display: flex; align-items: center; gap: .1rem; font-size: calc(.16 * var(--t)); font-weight: 700; color: var(--text-md); }
.tips__head > .icon { width: .2rem; height: .2rem; color: var(--mint-500); }
.tips__idx { margin-left: auto; font-size: calc(.16 * var(--t)); color: var(--text-md); }
.tips__nav {
  display: grid;
  place-items: center;
  width: .3rem;
  height: .3rem;
  padding: 0;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-lo);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tips__nav:hover { color: var(--mint-400); border-color: var(--mint-700); }
.tips__nav .icon { width: .18rem; height: .18rem; }
.tips__text { margin-top: .1rem; font-size: calc(.17 * var(--t)); color: var(--text-lo); line-height: 1.6; animation: tip-in var(--t-slow) var(--ease-out); }
@keyframes tip-in { from { opacity: 0; transform: translateX(.1rem); } }

/* ---- difficulty cards -------------------------------------------------------------------------------- */
.diff-list { display: flex; flex-direction: column; gap: .14rem; }
.diff-card {
  --d-color: var(--amber);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  gap: .06rem .2rem;
  padding: .18rem .24rem .18rem .36rem;
  overflow: hidden;
  text-align: left;
  background: linear-gradient(90deg, rgba(28, 34, 31, .93), rgba(15, 19, 17, .93));
  border: 1px solid var(--line);
  color: var(--text-hi);
  transition: border-color var(--t-med), box-shadow var(--t-med), background var(--t-med);
  animation: card-in var(--t-slow) var(--ease-out) backwards;
}
.diff-card:nth-child(2) { animation-delay: 40ms; }
.diff-card:nth-child(3) { animation-delay: 80ms; }
.diff-card:nth-child(4) { animation-delay: 120ms; }
.diff-card__bar { position: absolute; left: 0; top: 0; bottom: 0; width: .06rem; background: var(--d-color); opacity: .45; transition: opacity var(--t-med), box-shadow var(--t-med); }
.diff-card__head { grid-column: 1 / -1; display: flex; align-items: center; gap: .1rem; min-width: 0; }
.diff-card__glyph { width: .28rem; height: .28rem; color: var(--d-color); filter: drop-shadow(0 0 5px var(--d-color)); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--d-color) 55%, transparent)); }
.diff-card__name { font-size: calc(.27 * var(--t)); font-weight: 900; letter-spacing: .06em; color: var(--d-color); }
.diff-card__code { font-size: calc(.14 * var(--t)); color: var(--text-dim); letter-spacing: .1em; }
.diff-card__meta { margin-left: auto; display: flex; align-items: center; gap: .04rem; font-size: calc(.14 * var(--t)); color: var(--text-lo); white-space: nowrap; }
.diff-card__meta .num { color: var(--text-hi); font-weight: 700; font-size: calc(.17 * var(--t)); }
.diff-card__hidden {
  margin-left: .08rem;
  padding: 0 .07rem;
  border: 1px solid transparent; border: 1px solid color-mix(in srgb, var(--d-color) 45%, transparent);
  color: var(--d-color); color: color-mix(in srgb, var(--d-color) 80%, #fff);
  font-size: calc(.12 * var(--t));
  line-height: 1.6;
}
.diff-card__desc { grid-column: 1; font-size: calc(.16 * var(--t)); color: var(--text-md); }
.diff-card__effects { grid-column: 1; display: flex; flex-wrap: wrap; gap: .04rem .2rem; font-size: calc(.14 * var(--t)); color: var(--text-lo); }
.diff-card__effects span::before { content: '·'; margin-right: .05rem; color: var(--d-color); font-weight: 900; }
/* battlefield pool note (config.json modes[].stages): 战场固定为 战场#01 / 战场随机（共N张） — the last item of the
   effects row (no extra card height: the lobby must not scroll at 1280×720 / 1920×1080) */
.diff-card__effects .diff-card__stage { display: inline-flex; align-self: flex-start; align-items: center; gap: .05rem; }
.diff-card__effects .diff-card__stage::before { content: none; }
.diff-card__stage .icon { flex: none; width: .15rem; height: .15rem; color: var(--d-color); opacity: .85; }
.diff-card__check {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .03rem;
  font-size: calc(.12 * var(--t));
  color: var(--text-dim);
}
.diff-card__check .icon {
  width: .46rem;
  height: .46rem;
  padding: .09rem;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  color: transparent;
  transition: background var(--t-med), border-color var(--t-med), color var(--t-med), transform var(--t-med) var(--ease-out);
}
.diff-card__check span { opacity: 0; transition: opacity var(--t-med); }
.diff-card:hover { border-color: var(--line-3); }
.diff-card.is-selected {
  border-color: var(--d-color); border-color: color-mix(in srgb, var(--d-color) 65%, transparent);
  background: linear-gradient(90deg, #151a18, rgba(15, 19, 17, .95) 70%); background: linear-gradient(90deg, color-mix(in srgb, var(--d-color) 15%, #151a18), rgba(15, 19, 17, .95) 70%);
  box-shadow: 0 0 .3rem transparent; box-shadow: 0 0 .3rem color-mix(in srgb, var(--d-color) 16%, transparent);
}
.diff-card.is-selected .diff-card__bar { opacity: 1; box-shadow: 0 0 .14rem var(--d-color); }
.diff-card.is-selected .diff-card__check { color: var(--d-color); }
.diff-card.is-selected .diff-card__check .icon { background: var(--d-color); border-color: var(--d-color); color: #150a04; transform: rotate(-8deg); }
.diff-card.is-selected .diff-card__check span { opacity: 1; }

/* ---- create ------------------------------------------------------------------------------------------ */
.create-box { margin-top: .3rem; display: flex; flex-direction: column; gap: .12rem; }
.create-box__test {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .04rem .1rem;
  color: #e8b84a; font-size: calc(.16 * var(--t));
}
.create-box__test input { width: .2rem; height: .2rem; margin: 0; flex: none; accent-color: #e8b84a; }
.create-box__test em { flex-basis: 100%; font-style: normal; }
@media (max-width: 720px) {
  .create-box__test { font-size: 16px; }
  .create-box__test input { width: 32px; height: 32px; }
  .create-box__test em { font-size: 14px; }
}
.create-box .btn--xl { height: .92rem; font-size: calc(.32 * var(--t)); letter-spacing: .3em; }
.create-box__hint { display: flex; align-items: center; justify-content: center; min-height: .3rem; font-size: calc(.14 * var(--t)); color: var(--text-lo); }

.btn-create-alliance {
  position: relative;
  overflow: hidden;
}
.btn-create-alliance::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1.4rem;
  background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .14) 0 8px, transparent 8px 16px);
  pointer-events: none;
}

/* ---- online indicator pill -------------------------------------------------------------------------- */
.online-pill {
  display: inline-flex;
  align-items: center;
  gap: .06rem;
  padding: .04rem .14rem .04rem .12rem;
  background: rgba(14, 28, 24, .85);
  border: 1px solid rgba(78, 216, 175, .35);
  border-radius: .04rem;
  font-size: calc(.15 * var(--t));
  color: var(--mint-400);
}
.online-pill__dot {
  width: .08rem;
  height: .08rem;
  border-radius: 50%;
  background: var(--mint-400);
  box-shadow: 0 0 .08rem var(--mint-400);
}
.online-pill .num {
  font-weight: 700;
  color: var(--text-hi);
}
.online-pill__label {
  font-size: calc(.13 * var(--t));
  color: var(--mint-400);
}

/* ---- 02 多人匹配 MULTIPLAYER MATCHMAKING panel ---------------------------------------------------- */
.matchmaking-panel {
  --bk-c: var(--mint-400);
  --bk-l: .22rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .2rem;
  padding: .24rem .28rem;
  margin-bottom: .34rem;
  background: linear-gradient(180deg, rgba(20, 26, 23, .92), rgba(12, 16, 15, .95));
  border: 1px solid rgba(78, 216, 175, .3);
  box-shadow: 0 0 .3rem rgba(23, 249, 183, .04);
}
.matchmaking-panel__content {
  display: flex;
  flex-direction: column;
  gap: .06rem;
  min-width: 0;
}
.matchmaking-panel__title {
  font-size: calc(.28 * var(--t));
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--text-hi);
}
.matchmaking-panel__desc {
  font-size: calc(.15 * var(--t));
  color: var(--text-lo);
  line-height: 1.55;
  max-width: 4.8rem;
}
.matchmaking-panel__action {
  display: flex;
  align-items: center;
  gap: .16rem;
  flex-shrink: 0;
}
.matchmaking-online-chip {
  display: flex;
  align-items: center;
  gap: .08rem;
  padding: .06rem .14rem;
  background: rgba(14, 28, 24, .85);
  border: 1px solid rgba(78, 216, 175, .3);
  border-radius: .04rem;
  color: var(--mint-400);
  font-size: calc(.16 * var(--t));
}
.matchmaking-online-chip .icon {
  width: .18rem;
  height: .18rem;
  color: var(--mint-400);
}
.matchmaking-online-chip .num {
  font-weight: 700;
  color: var(--text-hi);
  font-size: calc(.18 * var(--t));
}
.btn-matchmaking-open {
  height: .64rem;
  padding: 0 .26rem;
  font-size: calc(.2 * var(--t));
  font-weight: 900;
  letter-spacing: .08em;
  background: var(--mint-500);
  color: #0c1210;
  border: 1px solid var(--mint-400);
  box-shadow: 0 0 .2rem rgba(23, 249, 183, .25);
}
.btn-matchmaking-open:hover {
  background: var(--mint-400);
  box-shadow: 0 0 .3rem rgba(23, 249, 183, .45);
}

/* ---- Matchmaking Modal (图2 HUD风格房间大厅) ------------------------------------------------------- */
.mm-modal__box {
  --bk-c: var(--mint-400);
  --bk-l: .25rem;
  width: min(8.8rem, 95vw);
  max-height: 90vh;
  background: linear-gradient(180deg, #131917, #0c100e);
  border: 1px solid rgba(78, 216, 175, .35);
  box-shadow: 0 .3rem 1.2rem rgba(0, 0, 0, .8), 0 0 .5rem rgba(23, 249, 183, .12);
}
.mm-modal .modal__stripe {
  height: .07rem;
  background: repeating-linear-gradient(-45deg, var(--mint-400) 0 8px, transparent 8px 16px);
  opacity: .8;
}
.mm-modal__head {
  padding: .24rem .32rem .1rem;
}
.mm-modal__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mm-modal__title {
  font-size: calc(.34 * var(--t));
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--text-hi);
}
.mm-modal__close {
  display: grid;
  place-items: center;
  width: .36rem;
  height: .36rem;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-md);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.mm-modal__close:hover {
  border-color: var(--mint-400);
  color: var(--mint-400);
}
.mm-modal__body {
  padding: .14rem .32rem .24rem;
  display: flex;
  flex-direction: column;
  gap: .18rem;
}
.mm-stats-bar {
  display: flex;
  align-items: center;
  padding: .16rem .28rem;
  background: rgba(18, 29, 25, .85);
  border: 1px solid rgba(78, 216, 175, .2);
  gap: .4rem;
}
.mm-stats-col {
  display: flex;
  flex-direction: column;
  gap: .02rem;
}
.mm-stats-num {
  font-size: calc(.38 * var(--t));
  font-weight: 900;
  line-height: 1;
  color: #fff;
}
.mm-stats-num--mint {
  color: var(--mint-400);
  text-shadow: 0 0 .15rem rgba(23, 249, 183, .35);
}
.mm-stats-label {
  font-size: calc(.14 * var(--t));
  color: var(--text-lo);
  letter-spacing: .04em;
}
.mm-refresh-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .08rem;
  padding: .08rem .16rem;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line-2);
  color: var(--text-md);
  font-size: calc(.16 * var(--t));
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.mm-refresh-btn:hover {
  border-color: var(--mint-400);
  color: var(--text-hi);
}
.mm-refresh-btn .icon {
  width: .18rem;
  height: .18rem;
}
.is-spinning {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}
.mm-room-list {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-height: 2.2rem;
  max-height: 4.8rem;
  overflow-y: auto;
}
.mm-room-card {
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .14rem .2rem;
  background: rgba(18, 23, 21, .9);
  border: 1px solid var(--line-2);
  transition: border-color var(--t-fast);
}
.mm-room-card:hover {
  border-color: rgba(78, 216, 175, .3);
}
.mm-room-code {
  width: 1.1rem;
  height: .64rem;
  display: grid;
  place-items: center;
  background: rgba(10, 13, 12, .9);
  border: 1px solid var(--line);
  font-size: calc(.28 * var(--t));
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--text-md);
}
.mm-room-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .06rem;
  min-width: 0;
}
.mm-room-name {
  font-size: calc(.22 * var(--t));
  font-weight: 700;
  color: var(--text-hi);
}
.mm-room-meta {
  display: flex;
  align-items: center;
  gap: .18rem;
  font-size: calc(.14 * var(--t));
  color: var(--text-md);
}
.mm-room-diff {
  display: flex;
  align-items: center;
  gap: .05rem;
  color: var(--d-color);
  font-weight: 700;
}
.mm-room-diff .diff-glyph {
  width: .18rem;
  height: .18rem;
  color: var(--d-color);
}
.mm-room-players {
  display: flex;
  align-items: center;
  gap: .05rem;
  color: var(--text-md);
}
.mm-room-players .icon {
  width: .16rem;
  height: .16rem;
}
.mm-room-status {
  padding: .02rem .08rem;
  font-size: calc(.12 * var(--t));
  border: 1px solid var(--line);
}
.mm-room-status.is-in-match {
  background: rgba(50, 50, 50, .4);
  color: var(--text-dim);
  border-color: var(--line);
}
.mm-room-status.is-waiting {
  background: rgba(23, 249, 183, .12);
  color: var(--mint-400);
  border-color: rgba(78, 216, 175, .3);
}
.mm-room-actions {
  display: flex;
  align-items: center;
  gap: .1rem;
}
.mm-btn-join {
  min-width: 1.05rem;
  height: .56rem;
}
.mm-btn-join.is-disabled-match {
  opacity: .5;
  cursor: not-allowed;
  background: repeating-linear-gradient(45deg, rgba(23, 249, 183, .06) 0 6px, transparent 6px 12px) !important;
  border-color: var(--line) !important;
  color: var(--text-dim) !important;
}
.mm-btn-spectate {
  min-width: 1.05rem;
  height: .56rem;
  background: rgba(14, 18, 16, .9);
  border: 1px solid var(--line-2);
}
.mm-room-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12rem;
  padding: .6rem 0;
  color: var(--text-dim);
  font-size: calc(.16 * var(--t));
}
.mm-room-empty .icon {
  width: .36rem;
  height: .36rem;
  color: var(--text-dim);
}
.mm-modal__foot {
  display: flex;
  align-items: center;
  gap: .14rem;
  padding-top: .12rem;
  border-top: 1px solid var(--line);
}
.mm-foot-text {
  font-size: calc(.13 * var(--t));
  color: var(--text-dim);
  letter-spacing: .02em;
}


.matchmaking-count { display: inline-flex; gap: .035rem; color: var(--mint); font-size: max(calc(.12 * var(--t)), 11px); white-space: nowrap; align-items: baseline; }
.mode-card .matchmaking-count { margin-top: .08rem; }
.diff-card__head { flex-wrap: wrap; }

/* Keep the deployed matchmaking controls beside the room browser. */
.matchmaking-panel__action { flex-wrap: wrap; justify-content: flex-end; gap: .1rem; }
.btn-quick-match { height: .64rem; white-space: nowrap; }

/* ---- lobby hub (2026-10-13, owner's request): generated backdrop (ui/hubBackdrop.js), the game's emblem, left
   column, right column (缺人同盟 · S.W.E.E.P.报告 · 干员调配), four entries ---- */
/* backdrop colour tokens: 夜巡 is the default; the swatches of the 大厅背景 dialog carry their own data-hub-theme */
.lobby-hub, [data-hub-theme="night"], [data-hub-theme="custom"] {
  --sky-0: #03080a; --sky-1: #08141a; --sky-2: #12262a; --sky-3: #050909;
  --haze: rgba(92, 168, 156, .17); --cloud: rgba(140, 196, 186, .055);
  --ridge-far: #122022; --ridge-mid: #0b1516; --ridge-near: #060b0b;
  --rim: rgba(110, 226, 196, .34); --fog: rgba(54, 104, 98, .3); --beam: rgba(150, 240, 215, .1);
  --beacon: #59f4ca; --window: rgba(89, 244, 202, .7); --grid: rgba(89, 244, 202, .32);
  --mote: rgba(170, 245, 225, .7); --radar: rgba(89, 244, 202, .15);
}
[data-hub-theme="frost"] {
  --sky-0: #070c12; --sky-1: #142029; --sky-2: #34444f; --sky-3: #090d11;
  --haze: rgba(205, 226, 240, .2); --cloud: rgba(220, 236, 246, .08);
  --ridge-far: #3a4852; --ridge-mid: #212c34; --ridge-near: #0f1418;
  --rim: rgba(240, 248, 255, .62); --fog: rgba(180, 200, 214, .24); --beam: rgba(225, 240, 255, .12);
  --beacon: #9fd8ff; --window: rgba(170, 220, 255, .7); --grid: rgba(170, 215, 240, .26);
  --mote: rgba(240, 248, 255, .85); --radar: rgba(180, 220, 245, .16);
  --aurora-a: rgba(96, 214, 255, .3); --aurora-b: rgba(170, 140, 255, .26); --sweep: rgba(226, 244, 255, .13);
}
[data-hub-theme="ember"] {
  --sky-0: #080605; --sky-1: #120d0b; --sky-2: #251913; --sky-3: #070505;
  --haze: rgba(196, 104, 52, .15); --cloud: rgba(130, 96, 76, .08);
  --ridge-far: #211814; --ridge-mid: #150f0c; --ridge-near: #090606;
  --rim: rgba(255, 150, 80, .28); --fog: rgba(84, 52, 38, .32); --beam: transparent;
  --beacon: #ffae48; --window: rgba(255, 168, 80, .75); --grid: rgba(255, 170, 90, .22);
  --mote: rgba(255, 150, 70, .85); --radar: rgba(255, 180, 110, .14);
  --aurora-a: transparent; --aurora-b: transparent; --sweep: rgba(255, 176, 96, .12);
}
[data-hub-theme="calm"] {
  --sky-0: #040606; --sky-1: #070b0b; --sky-2: #0c1211; --sky-3: #040505;
  --haze: rgba(80, 120, 110, .07); --cloud: transparent;
  --ridge-far: #0e1514; --ridge-mid: #090e0e; --ridge-near: #050808;
  --rim: rgba(89, 244, 202, .14); --fog: rgba(30, 50, 46, .25); --beam: transparent;
  --beacon: #4ed8af; --window: rgba(78, 216, 175, .45); --grid: rgba(89, 244, 202, .22);
  --mote: transparent; --radar: rgba(89, 244, 202, .11);
  --aurora-a: transparent; --aurora-b: transparent; --sweep: transparent;
}
[data-hub-theme="custom"] { --radar: rgba(235, 245, 240, .14); }

.lobby-hub { --hub-entry-w: 2.1rem; --hub-gap: .14rem; display: flex; flex-direction: column; overflow: hidden; background: #050909; }
.hub-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--sky-3); }
.hub-bg__sky { position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 36%, var(--sky-2) 63%, var(--sky-3) 100%); }
.hub-bg__stars { position: absolute; left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%;
  animation: hub-twinkle 7s ease-in-out infinite alternate; }
.hub-bg__haze { position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 20% at 50% 64%, var(--haze), transparent 72%),
    radial-gradient(ellipse 130% 36% at 50% 72%, var(--haze), transparent 70%); }
.hub-bg__clouds { position: absolute; left: 0; top: 6%; width: 200%; height: 50%;
  background:
    radial-gradient(30% 10% at 15% 42%, var(--cloud), transparent 70%),
    radial-gradient(22% 7% at 38% 20%, var(--cloud), transparent 70%),
    radial-gradient(36% 11% at 66% 58%, var(--cloud), transparent 70%),
    radial-gradient(20% 6% at 88% 28%, var(--cloud), transparent 70%);
  background-size: 50% 100%; background-repeat: repeat-x; animation: hub-drift 180s linear infinite; }
.hub-bg__land { position: absolute; left: 0; bottom: 0; width: 100%; height: 64%; overflow: visible; }
.hub-bg__ridge--far { fill: var(--ridge-far); }
.hub-bg__ridge--mid, .hub-bg__fort { fill: var(--ridge-mid); }
.hub-bg__ridge--near { fill: var(--ridge-near); }
.hub-bg__rim { fill: none; stroke: var(--rim); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.hub-fog-0 { stop-color: var(--fog); stop-opacity: 0; }
.hub-fog-1 { stop-color: var(--fog); stop-opacity: 1; }
.hub-beam-0 { stop-color: var(--beam); }
.hub-beam-1 { stop-color: var(--beam); stop-opacity: 0; }
.hub-bg__beam { transform-origin: 791px 300px; animation: hub-beam 16s ease-in-out infinite alternate; }
.hub-bg__windows rect { fill: var(--window); animation: hub-window 9s steps(1) infinite; animation-delay: var(--dl); }
.hub-bg__beacons g { fill: var(--beacon); animation: hub-beacon 2.8s ease-in-out infinite; animation-delay: var(--dl); }
.hub-bg__beacon-glow { opacity: .22; }
/* parallax: the three ridges drift at their own speed, so the skyline reads as depth rather than a flat plate */
.hub-bg__layer { animation: hub-parallax-far 27s ease-in-out infinite alternate; }
.hub-bg__layer--mid { animation-name: hub-parallax-mid; animation-duration: 36s; }
.hub-bg__layer--near { animation-name: hub-parallax-near; animation-duration: 47s; }
.hub-bg__haze { animation: hub-haze 21s ease-in-out infinite alternate; }
/* 霜原: a slow aurora curtain over the ridge; 霜原/烬野: a soft light band crossing the field */
.hub-bg__aurora { position: absolute; left: -12%; right: -12%; top: -8%; height: 52%; pointer-events: none; opacity: .55;
  background: linear-gradient(101deg, transparent 8%, var(--aurora-a) 26%, var(--aurora-b) 48%, var(--aurora-a) 68%, transparent 88%);
  background-size: 200% 100%; filter: blur(18px); mix-blend-mode: screen;
  animation: hub-aurora 34s ease-in-out infinite alternate, hub-aurora-pulse 13s ease-in-out infinite alternate; }
.hub-bg__sweep { position: absolute; inset: -12% -30%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(78deg, transparent 44%, var(--sweep) 50%, transparent 56%);
  animation: hub-sweep-band 26s linear infinite; }
.hub-bg__motes { position: absolute; inset: 0; }
.hub-bg__mote { position: absolute; border-radius: 50%; background: var(--mote); box-shadow: 0 0 6px var(--mote); opacity: 0;
  animation: hub-mote var(--d) linear infinite; animation-delay: var(--dl); }
[data-hub-theme="frost"] .hub-bg__mote { animation-name: hub-snow; }
.hub-bg__grid { position: absolute; left: -20%; right: -20%; bottom: -6%; height: 30%; opacity: .24;
  background:
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 64px);
  transform: perspective(420px) rotateX(62deg); transform-origin: 50% 100%;
  mask-image: linear-gradient(0deg, #000 5%, transparent 85%); -webkit-mask-image: linear-gradient(0deg, #000 5%, transparent 85%); }
.hub-bg__dots { position: absolute; inset: 0; opacity: .12;
  background-image: radial-gradient(rgba(223, 230, 226, .6) 1px, transparent 1.2px); background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000, transparent 50%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 50%); }
.hub-bg__scan { position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hub-bg__vignette { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .42), transparent 16%),
    radial-gradient(130% 95% at 50% 42%, transparent 50%, rgba(0, 0, 0, .72)); }
.hub-bg__photo { position: absolute; inset: -24px; background-position: center; background-size: cover; background-repeat: no-repeat; }
.hub-bg__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 7, 7, .92), rgba(3, 7, 7, .78) 50%, rgba(3, 7, 7, .96)); }
.hub-bg[data-motion="off"] *, .lobby-hub .hub-bg[data-motion="off"] { animation: none !important; }
.hub-bg[data-motion="off"] .hub-bg__mote { opacity: .3; }

@keyframes hub-twinkle { from { opacity: .5; } to { opacity: 1; } }
@keyframes hub-drift { to { transform: translateX(-50%); } }
@keyframes hub-beam { from { transform: rotate(-18deg); } to { transform: rotate(24deg); } }
@keyframes hub-window { 0%, 70% { opacity: .9; } 72%, 78% { opacity: .2; } 80%, 100% { opacity: .9; } }
@keyframes hub-beacon { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes hub-mote { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: .8; } 85% { opacity: .45; } 100% { transform: translate3d(2vw, -18vh, 0); opacity: 0; } }
@keyframes hub-snow { 0% { transform: translate3d(0, -12vh, 0); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .7; } 100% { transform: translate3d(-3vw, 14vh, 0); opacity: 0; } }
@keyframes hub-sweep { to { transform: rotate(1turn); } }
@keyframes hub-parallax-far { from { transform: translateX(-.45%); } to { transform: translateX(.45%); } }
@keyframes hub-parallax-mid { from { transform: translateX(-1%); } to { transform: translateX(1%); } }
@keyframes hub-parallax-near { from { transform: translateX(-1.8%); } to { transform: translateX(1.8%); } }
@keyframes hub-haze { from { opacity: .8; transform: scale(1); } to { opacity: 1; transform: scale(1.045); } }
@keyframes hub-aurora { from { background-position: 0% 0%; transform: translateX(-2%) skewY(-1deg); } to { background-position: 100% 0%; transform: translateX(2%) skewY(1.4deg); } }
@keyframes hub-aurora-pulse { from { opacity: .34; } to { opacity: .62; } }
@keyframes hub-sweep-band {
  0% { transform: translateX(-72%) rotate(6deg); opacity: 0; }
  14% { opacity: .45; }
  50% { opacity: .7; }
  86% { opacity: .35; }
  100% { transform: translateX(72%) rotate(6deg); opacity: 0; }
}
@keyframes hub-pulse { 0% { box-shadow: 0 0 0 0 rgba(89, 244, 202, .55); } 100% { box-shadow: 0 0 0 .1rem rgba(89, 244, 202, 0); } }

.lobby-hub > .topbar, .hub-stage { position: relative; z-index: 1; }
/* the top bar's own dialogs (设置, 玩法说明, the account menu) open inside it: it must stack above the stage */
.lobby-hub > .topbar { z-index: 2; }
.hub-topbar { background: linear-gradient(180deg, rgba(4, 8, 8, .85), transparent); border-bottom: 0; }
.hub-online { display: inline-flex; align-items: center; gap: .08rem; padding: .04rem .14rem; margin-right: .1rem;
  border: 1px solid var(--mint-a35); background: rgba(8, 14, 12, .6); color: var(--text-hi); font-size: calc(.14 * var(--t)); white-space: nowrap; }
.hub-online .num { color: var(--mint-400); font-weight: 800; }

/* the centre spans the whole first row so the emblem sits in the middle of the screen; both columns lie above it */
.hub-stage { flex: 1 1 auto; min-height: 0; display: grid; padding: .1rem .36rem .36rem;
  grid-template-columns: minmax(2.6rem, 3.2rem) 1fr calc(var(--hub-entry-w) * 2 + var(--hub-gap));
  grid-template-rows: minmax(0, 1fr) auto; gap: .2rem .4rem; }
.hub-center { transition: opacity .28s ease; }
.hub-center.is-hidden { opacity: 0; pointer-events: none; }
.hub-center { grid-column: 1 / -1; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none; }
/* 维护者 2026-10-25 (逐屏裁决: 大厅的图标与标题取官方 0.3.3): the emblem keeps the official reserved height and the
   title the official measure, so the centre reads at the official size (our own values were .14rem / .46rem) */
.hub-center__mark { position: relative; display: grid; place-items: center; min-height: 1.4rem; margin-bottom: .1rem; }
.hub-center__mark .emblem { position: relative; margin: 0; z-index: 1; }
.hub-center__en { position: relative; font-family: var(--font-display); font-size: calc(.17 * var(--t)); letter-spacing: .32em; color: rgba(223, 230, 226, .72);
  text-shadow: 0 1px .08rem rgba(0, 0, 0, .85); }
/* a bright custom picture: keep the emblem readable */
[data-hub-theme="custom"] .hub-center__mark .emblem { filter: drop-shadow(0 0 .1rem rgba(0, 0, 0, .7)); }
.hub-center__en b { color: var(--mint-400); }
.hub-center__title { position: relative; margin: 0; font-size: min(calc(.56 * var(--t)), calc((100vw - 9.52rem) / 8.2));
  max-width: calc(100% - 8.8rem); font-weight: 900; letter-spacing: .14em; line-height: 1.15; color: var(--text-hi);
  text-shadow: 0 .04rem .3rem rgba(0, 0, 0, .8); }
.hub-radar { position: absolute; left: 50%; top: 50%; width: 5.2rem; height: 5.2rem; transform: translate(-50%, -50%); }
.hub-radar svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--radar); stroke-width: 1; }
.hub-radar .hub-radar__ticks { stroke-width: 5; stroke-dasharray: 1.4 9.8; }
.hub-radar__sweep { position: absolute; inset: 5.4%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 292deg, var(--radar) 360deg);
  mask-image: radial-gradient(circle, transparent 0 17%, #000 18%); -webkit-mask-image: radial-gradient(circle, transparent 0 17%, #000 18%);
  animation: hub-sweep 9s linear infinite; }

/* left column — top: the bottom-left corner belongs to the lobby chat (ui/communityChat.js) */
.hub-side { grid-column: 1; grid-row: 1 / -1; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start;
  gap: .14rem; min-width: 0; padding-top: .3rem; }
.hub-tile { display: flex !important; align-items: center; gap: .14rem; width: 100%; min-height: .74rem; padding: .1rem .16rem;
  background: rgba(8, 14, 13, .8); border: 1px solid rgba(223, 230, 226, .2); border-left: 3px solid var(--mint-500);
  color: var(--text-hi); text-align: left; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.hub-tile:hover { background: rgba(24, 40, 36, .9); border-color: var(--mint-a35); }
.hub-tile__icon { display: grid; place-items: center; width: .44rem; height: .44rem; flex: none; border: 1px solid var(--mint-a35); color: var(--mint-400); font-size: calc(.22 * var(--t)); }
.hub-tile__text { display: flex; flex-direction: column; gap: .02rem; min-width: 0; }
.hub-tile__label { font-size: calc(.2 * var(--t)); font-weight: 800; }
.hub-tile__en { font: 600 .1rem/1 ui-monospace, Consolas, monospace; letter-spacing: .18em; color: var(--text-dim); }
.hub-side .tips { margin-top: .04rem; background: rgba(8, 14, 13, .72); }

/* right column: 缺人同盟 card, then the S.W.E.E.P.报告 and 干员调配 plates, above the entries */
.hub-right { grid-column: 3; grid-row: 1; position: relative; z-index: 1; display: flex; flex-direction: column; gap: .16rem; min-width: 0; min-height: 0; padding-top: .06rem; }
.hub-recruit { flex: none; background: linear-gradient(180deg, rgba(9, 17, 16, .88), rgba(6, 11, 10, .9)); border: 1px solid rgba(223, 230, 226, .14);
  border-top: 2px solid var(--mint-500); box-shadow: 0 .06rem .24rem rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hub-recruit__head { display: flex; align-items: center; gap: .08rem; height: .42rem; padding: 0 .08rem 0 .14rem; border-bottom: 1px solid rgba(223, 230, 226, .08); }
.hub-recruit__pulse { width: .08rem; height: .08rem; flex: none; border-radius: 50%; background: var(--text-dim); }
.hub-recruit__pulse.is-live { background: var(--mint-400); animation: hub-pulse 1.8s ease-out infinite; }
.hub-recruit__title { font-size: calc(.17 * var(--t)); font-weight: 800; color: var(--text-hi); letter-spacing: .06em; white-space: nowrap; }
.hub-recruit__en { font: 700 .1rem/1 ui-monospace, Consolas, monospace; letter-spacing: .2em; color: var(--mint-400); opacity: .7; }
.hub-recruit__n { min-width: .24rem; padding: .02rem .06rem; text-align: center; font-size: calc(.13 * var(--t)); font-weight: 800; color: #04140f; background: var(--mint-500); }
.hub-recruit__all { margin-left: auto; display: inline-flex; align-items: center; gap: .02rem; padding: .04rem .06rem; font-size: calc(.13 * var(--t));
  color: rgba(223, 230, 226, .72); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.hub-recruit__all:hover { color: var(--mint-400); }
.hub-recruit__list { --row-h: .56rem; height: calc(var(--row-h) * 3 + .08rem + .16rem); padding: .08rem; display: flex; flex-direction: column; gap: .04rem; }
.hub-recruit__row { position: relative; display: flex; align-items: center; gap: .1rem; height: var(--row-h); flex: none; padding: 0 .08rem 0 .14rem;
  background: rgba(223, 230, 226, .035); border: 1px solid rgba(223, 230, 226, .06); transition: background var(--t-fast), border-color var(--t-fast); }
.hub-recruit__row::before { content: ''; position: absolute; left: 0; top: .08rem; bottom: .08rem; width: 3px; background: var(--d-color); }
.hub-recruit__row:hover { background: rgba(78, 216, 175, .07); border-color: var(--mint-a20); }
.hub-recruit__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .04rem; }
.hub-recruit__name { font-size: calc(.15 * var(--t)); font-weight: 700; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-recruit__meta { display: flex; align-items: center; gap: .06rem; font-size: calc(.12 * var(--t)); color: var(--d-color); white-space: nowrap; overflow: hidden; }
.hub-recruit__meta .diff-glyph { width: .14rem; height: .14rem; flex: none; }
.hub-recruit__fp { color: var(--gold); }
.hub-recruit__seats { display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; flex: none; }
.hub-recruit__pips { display: flex; gap: 2px; }
.hub-recruit__pips i { width: .07rem; height: .12rem; background: rgba(223, 230, 226, .16); }
.hub-recruit__pips i.is-on { background: var(--mint-400); }
.hub-recruit__need { font-size: calc(.12 * var(--t)); color: var(--amber); white-space: nowrap; }
.hub-recruit__need b { margin: 0 .02rem; font-size: calc(.14 * var(--t)); }
.hub-recruit__join { flex: none; height: .36rem; padding: 0 .16rem; font-size: calc(.14 * var(--t)); font-weight: 800; color: #04140f; background: var(--mint-500);
  border: 0; cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% 68%, 84% 100%, 0 100%); transition: background var(--t-fast); }
.hub-recruit__join:hover:not(:disabled) { background: var(--mint-400); }
.hub-recruit__join:disabled { opacity: .45; cursor: default; }
.hub-recruit__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  color: rgba(223, 230, 226, .5); font-size: calc(.14 * var(--t)); border: 1px dashed rgba(223, 230, 226, .1); }
.hub-recruit__create { display: inline-flex; align-items: center; gap: .02rem; padding: .05rem .14rem; font-size: calc(.13 * var(--t)); font-weight: 700;
  color: var(--mint-400); background: transparent; border: 1px solid var(--mint-a35); cursor: pointer; }
.hub-recruit__create:hover { background: rgba(78, 216, 175, .1); }

/* light plates with bracket marks (S.W.E.E.P.报告 opens screens/sweep.js, 干员调配 is loadout.js's LoadoutButton) */
.hub-right__plates { display: flex; flex-direction: column; gap: .12rem; }
.hub-plate { --pl-ink: #222b28; position: relative; display: flex !important; align-items: center; justify-content: flex-start !important; gap: .14rem;
  width: 100%; height: .7rem !important; min-width: 0; padding: 0 .22rem 0 .2rem !important; color: #111816 !important; text-align: left;
  background:
    linear-gradient(var(--pl-ink), var(--pl-ink)) left .07rem center / 2px 54% no-repeat,
    linear-gradient(var(--pl-ink), var(--pl-ink)) left .07rem top 23% / .06rem 2px no-repeat,
    linear-gradient(var(--pl-ink), var(--pl-ink)) left .07rem bottom 23% / .06rem 2px no-repeat,
    linear-gradient(var(--pl-ink), var(--pl-ink)) right .07rem center / 2px 54% no-repeat,
    linear-gradient(var(--pl-ink), var(--pl-ink)) right .07rem top 23% / .06rem 2px no-repeat,
    linear-gradient(var(--pl-ink), var(--pl-ink)) right .07rem bottom 23% / .06rem 2px no-repeat,
    linear-gradient(180deg, #e8edea, #c6cfcb) !important;
  border: 1px solid rgba(255, 255, 255, .5) !important; box-shadow: 0 .05rem .18rem rgba(0, 0, 0, .5), inset 0 -2px 0 rgba(0, 0, 0, .14); }
.hub-plate__glyph, .hub-plate .lo-entry__icon, .hub-plate > .btn__icon { width: .46rem !important; height: .46rem !important; flex: none; display: grid; place-items: center;
  padding: .07rem; background: #182120; color: var(--mint-400); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); box-sizing: border-box; }
.hub-plate__glyph svg { width: 100%; height: 100%; }
.hub-plate__label, .hub-plate .btn__label { font-size: calc(.2 * var(--t)); font-weight: 900; letter-spacing: .04em; color: #111816; white-space: nowrap; }
.hub-plate__tag { margin-left: auto; padding: .03rem .07rem; font-size: calc(.11 * var(--t)); font-weight: 700; letter-spacing: .12em; color: rgba(17, 24, 22, .6);
  border: 1px solid rgba(17, 24, 22, .28); white-space: nowrap; }
.hub-plate--sweep { font: inherit; cursor: pointer; }
.hub-plate--sweep:hover, .hub-plate--loadout:not(:disabled):hover { filter: brightness(1.05); }
.hub-plate--sweep:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 2px; }

.hub-entries { grid-column: 2 / -1; grid-row: 2; display: flex; flex-direction: column; align-items: flex-end; gap: .12rem; }
.hub-searching, .hub-maint { width: min(100%, 8.6rem); }
.hub-maint { padding: .08rem .16rem; border: 1px solid var(--amber); color: var(--amber); background: rgba(40, 24, 6, .7); font-size: calc(.15 * var(--t)); }
/* 测试房间 (ui/../screens/lobby.js, welcome.testMode): applies to the next 独立模拟 / 同盟模拟 creation */
.hub-testroom { display: flex; align-items: center; gap: .08rem; padding: .06rem .16rem; border: 1px solid var(--line-2);
  background: rgba(6, 10, 9, .72); font-size: calc(.15 * var(--t)); color: var(--amber); cursor: pointer; }
.hub-testroom input { width: .16rem; height: .16rem; accent-color: var(--amber); }
.hub-testroom em { font-style: normal; font-size: calc(.13 * var(--t)); color: var(--text-dim); }
.hub-entries__row { display: flex; align-items: flex-end; gap: var(--hub-gap); }
.hub-entry-wrap { display: flex; flex-direction: column; gap: .05rem; }
.hub-entry__group { display: flex; align-items: center; gap: .06rem; height: .2rem; padding-left: .04rem; font-size: calc(.13 * var(--t)); color: rgba(223, 230, 226, .7); }
.hub-entry {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  width: var(--hub-entry-w); height: 1.34rem; padding: .14rem .16rem; overflow: hidden; cursor: pointer; text-align: left; color: var(--text-hi);
  background: linear-gradient(160deg, rgba(30, 46, 42, .94), rgba(9, 15, 14, .96)); border: 1px solid rgba(223, 230, 226, .26);
  box-shadow: 0 .06rem .24rem rgba(0, 0, 0, .5); transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.hub-entry:hover:not(:disabled) { transform: translateY(-.04rem); border-color: var(--mint-400); box-shadow: 0 .08rem .3rem rgba(0, 0, 0, .55), 0 0 .2rem var(--mint-a20); }
.hub-entry:disabled { opacity: .5; cursor: default; }
.hub-entry__icon { position: absolute; right: .14rem; top: .12rem; font-size: calc(.42 * var(--t)); color: var(--mint-a35); }
.hub-entry__en { font: 700 .11rem/1 ui-monospace, Consolas, monospace; letter-spacing: .22em; color: var(--mint-400); }
.hub-entry__name { display: flex; align-items: center; gap: .08rem; margin-top: .04rem; font-size: calc(.3 * var(--t)); font-weight: 900; letter-spacing: .06em; white-space: nowrap; }
.hub-entry__name .mode-beta { font-size: calc(.12 * var(--t)); }
.hub-entry__count { position: absolute; left: .16rem; top: .12rem; }
.hub-entry__corner { position: absolute; right: 0; bottom: 0; width: .3rem; height: .3rem;
  background: linear-gradient(135deg, transparent 50%, var(--mint-500) 50%); opacity: .8; }
.hub-entry--gold .hub-entry__en { color: var(--gold); }
.hub-entry--gold .hub-entry__icon { color: rgba(255, 198, 0, .3); }
.hub-entry--gold .hub-entry__corner { background: linear-gradient(135deg, transparent 50%, var(--gold) 50%); }
.hub-entry--gold:hover:not(:disabled) { border-color: var(--gold); }
.hub-entry--bright { background: linear-gradient(160deg, var(--mint-500), #1f8f72); color: #04140f; border-color: var(--mint-400); }
.hub-entry--bright .hub-entry__en { color: rgba(4, 20, 15, .75); }
.hub-entry--bright .hub-entry__icon { color: rgba(4, 20, 15, .25); }
.hub-entry--bright .hub-entry__corner { background: linear-gradient(135deg, transparent 50%, #e8fff7 50%); }

.hub-dialog-open .community-chat { visibility: hidden; }
.hub-dialog__box { width: min(6.4rem, calc(100vw - 32px)); max-height: calc(var(--sp-vh, 1vh) * 100 - 32px); display: flex; flex-direction: column; }
.hub-dialog__box--wide { width: min(10.4rem, calc(100vw - 32px)); }
.hub-dialog__head { padding: .2rem .26rem .1rem; }
.hub-dialog__title-row { display: flex; align-items: center; justify-content: space-between; gap: .2rem; }
.hub-dialog__body { padding: .06rem .26rem .24rem; overflow: auto; display: flex; flex-direction: column; gap: .14rem; }
.hub-sheet__desc { margin: 0; color: rgba(223, 230, 226, .8); font-size: calc(.16 * var(--t)); }
.hub-sheet__diffs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .12rem; }
.hub-sheet__foot { display: flex; align-items: center; justify-content: space-between; gap: .2rem; flex-wrap: wrap; }
.hub-sheet__actions { display: flex; align-items: center; gap: .14rem; margin-left: auto; }
.hub-join__buttons { display: flex; gap: .12rem; }

/* 大厅背景 dialog */
.bgset { display: flex; flex-direction: column; gap: .16rem; }
.bgset__themes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .1rem; }
.bgset__theme { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; min-width: 0; padding: .06rem; color: var(--text-hi);
  background: rgba(223, 230, 226, .04); border: 1px solid rgba(223, 230, 226, .14); cursor: pointer; text-align: left;
  transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.bgset__theme:hover { border-color: var(--mint-a35); }
.bgset__theme.is-selected { border-color: var(--mint-400); box-shadow: inset 0 0 0 1px var(--mint-400), 0 0 .14rem var(--mint-a20); }
.bgset__swatch { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(180deg, var(--sky-0), var(--sky-1) 40%, var(--sky-2) 66%, var(--sky-3)); }
.bgset__swatch svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bgset__swatch .sw-far { fill: var(--ridge-far); }
.bgset__swatch .sw-mid { fill: var(--ridge-mid); }
.bgset__swatch .sw-near { fill: var(--ridge-near); }
.bgset__swatch .sw-beacon { fill: var(--beacon); }
.bgset__swatch--custom { display: grid; place-items: center; background: #0b1110 center / cover no-repeat; outline: 1px dashed rgba(223, 230, 226, .2); outline-offset: -1px; }
.bgset__plus { font-size: calc(.34 * var(--t)); line-height: 1; color: rgba(223, 230, 226, .5); }
.bgset__name { font-size: calc(.15 * var(--t)); font-weight: 800; white-space: nowrap; }
.bgset__en { font: 700 .09rem/1 ui-monospace, Consolas, monospace; letter-spacing: .14em; color: var(--text-dim); white-space: nowrap; }
.bgset__custom { display: flex; flex-direction: column; gap: .1rem; padding: .12rem; border: 1px solid rgba(223, 230, 226, .1); background: rgba(223, 230, 226, .03); }
.bgset__row { display: flex; gap: .1rem; }
.bgset__slider { display: grid; grid-template-columns: .5rem 1fr .56rem; align-items: center; gap: .12rem; font-size: calc(.14 * var(--t)); color: rgba(223, 230, 226, .8); }
.bgset__slider input { width: 100%; accent-color: var(--mint-500); }
.bgset__slider b { text-align: right; color: var(--mint-400); }
.bgset__check { display: flex; align-items: center; gap: .08rem; font-size: calc(.14 * var(--t)); color: rgba(223, 230, 226, .85); cursor: pointer; }
.bgset__check input { width: .16rem; height: .16rem; accent-color: var(--mint-500); }
.bgset__note { margin: 0; font-size: calc(.12 * var(--t)); color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  .hub-bg *, .hub-radar__sweep, .hub-recruit__pulse.is-live { animation: none !important; }
  .hub-bg__mote { opacity: .3; }
}
/* phones in landscape: a shorter card (two rooms) and slimmer plates */
@media (max-height: 560px) and (min-aspect-ratio: 4/3) {
  .hub-right { gap: .1rem; }
  .hub-recruit__head { height: max(.36rem, 26px); }
  .hub-recruit__list { --row-h: max(.5rem, 32px); height: calc(var(--row-h) * 2 + .04rem + .12rem); padding: .06rem; }
  .hub-recruit__row:nth-child(n + 3) { display: none; }
  .hub-right__plates { gap: .08rem; }
  .hub-plate { height: max(.5rem, 32px) !important; gap: .1rem; }
  .hub-plate__glyph, .hub-plate .lo-entry__icon, .hub-plate > .btn__icon { width: max(.36rem, 22px) !important; height: max(.36rem, 22px) !important; padding: .04rem; }
  .hub-plate__label, .hub-plate .btn__label { font-size: max(calc(.16 * var(--t)), 12px); }
  .hub-plate__tag { font-size: max(calc(.1 * var(--t)), 9px); }
}
@media (max-aspect-ratio: 4/3) {
  .hub-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-content: start; overflow-y: auto; }
  .hub-center, .hub-side, .hub-right, .hub-entries { grid-column: 1; grid-row: auto; }
  .hub-center { order: 0; padding: .3rem 0; } .hub-entries { order: 1; } .hub-right { order: 2; } .hub-side { order: 3; padding-top: 0; }
  .hub-right { justify-self: end; width: min(100%, calc(var(--hub-entry-w) * 2 + var(--hub-gap))); }
  .hub-side { justify-self: start; width: min(100%, 3.2rem); }
  .hub-entries { align-items: stretch; }
  .hub-entries__row { flex-wrap: wrap; }
}
@media (max-width: 560px) { .bgset__themes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
:is(.sp-touch, .sp-coarse) .lobby-hub { --hub-entry-w: max(1.7rem, 112px); }
:is(.sp-touch, .sp-coarse) .hub-center__title { font-size: max(calc(.4 * var(--t)), 20px); }
:is(.sp-touch, .sp-coarse) .hub-entry { height: max(1.08rem, 72px); }
:is(.sp-touch, .sp-coarse) .hub-entry__name { font-size: max(calc(.24 * var(--t)), 15px); }
:is(.sp-touch, .sp-coarse) .hub-side .tips { display: none; }
:is(.sp-touch, .sp-coarse) .hub-recruit__title { font-size: max(calc(.17 * var(--t)), 12px); }
:is(.sp-touch, .sp-coarse) .hub-recruit__name { font-size: max(calc(.15 * var(--t)), 12px); }
:is(.sp-touch, .sp-coarse) .hub-recruit__meta, :is(.sp-touch, .sp-coarse) .hub-recruit__need, :is(.sp-touch, .sp-coarse) .hub-recruit__all { font-size: max(calc(.12 * var(--t)), 10px); }
:is(.sp-touch, .sp-coarse) .hub-recruit__join { height: max(.36rem, 26px); font-size: max(calc(.14 * var(--t)), 12px); }
:is(.sp-touch, .sp-coarse) .hub-recruit__empty { font-size: max(calc(.14 * var(--t)), 11px); }
:is(.sp-touch, .sp-coarse) .hub-recruit__create { font-size: max(calc(.13 * var(--t)), 11px); padding: 4px 10px; }
:is(.sp-touch, .sp-coarse) .hub-recruit__n { font-size: max(calc(.13 * var(--t)), 10px); }

/* ==========================================================================================
   S.W.E.E.P.报告 (2026-10-13, the owner's request; js/screens/sweep.js): a full-screen report over the lobby, laid out
   after the event's screen — a misty light-grey field, the top bar (back · ⓘ at the left, three tabs at the right), a
   detail column at the left and sections of dark tiles at the right; the enemy codex covers it when opened.
   ========================================================================================== */
.sw-open .community-chat { visibility: hidden; }
.sw {
  --sw-ink: #161b1a; --sw-tile: #262c2b; --sw-tile-2: #1a1f1e; --sw-panel: rgba(20, 25, 24, .8);
  position: fixed; inset: 0; z-index: 54; /* below 干员调配 (55), which a member opens over it */
  display: flex; flex-direction: column;
  padding: var(--sa-t, 0px) var(--sa-r, 0px) var(--sa-b, 0px) var(--sa-l, 0px);
  color: #f1f4f3; background: #9aa3a2; overscroll-behavior: contain;
  animation: sw-in 200ms var(--ease-out) backwards;
}
@keyframes sw-in { from { opacity: 0; } }
.sw__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(90% 70% at 72% 8%, rgba(255, 255, 255, .62), transparent 62%),
    radial-gradient(70% 80% at -6% 108%, rgba(8, 11, 11, .92), rgba(8, 11, 11, .4) 55%, transparent 75%),
    linear-gradient(90deg, rgba(10, 13, 13, .62), rgba(10, 13, 13, .4) 36%, transparent 50%),
    linear-gradient(180deg, #c9d0cf, #9aa4a3 48%, #6d7877); }
/* a slow drift of mist and a few survey lines (drawn here, no picture) */
.sw__mist { position: absolute; inset: -20%; background:
    radial-gradient(30% 22% at 30% 40%, rgba(255, 255, 255, .18), transparent 70%),
    radial-gradient(26% 20% at 70% 70%, rgba(255, 255, 255, .12), transparent 70%);
  animation: sw-mist 38s ease-in-out infinite alternate; }
@keyframes sw-mist { to { transform: translate3d(4%, -3%, 0); } }
.sw__lines { position: absolute; inset: 0; opacity: .5; background:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 1.2rem 1.2rem,
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 1.2rem 1.2rem;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 20%, #000 70%, transparent); }
.sw > :where(:not(.sw__bg, .sw-codex)) { position: relative; }

/* ---- top bar ---- */
.sw-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .3rem; height: max(1rem, 50px); padding: 0 .34rem 0 .26rem; }
.sw-top__left { display: flex; align-items: center; gap: .12rem; }
.sw-back { display: inline-flex; align-items: center; gap: .14rem; height: max(.66rem, 36px); padding: 0 .3rem 0 .12rem; font: inherit; color: #eef2f1; cursor: pointer;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .16) 1px, transparent 1.5px) 0 0 / .16rem .16rem,
    linear-gradient(180deg, #2a302f, #171b1a);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 .04rem .14rem rgba(0, 0, 0, .35); }
.sw-back:hover { border-color: rgba(255, 255, 255, .4); }
.sw-back .icon { width: max(.34rem, 20px); height: max(.34rem, 20px); }
.sw-back__mark { padding-left: .16rem; border-left: 1px solid rgba(255, 255, 255, .22); font-family: var(--font-display); font-size: max(calc(.16 * var(--t)), 11px); letter-spacing: .2em; color: #c9d2cf; }
.sw-info { display: grid; place-items: center; width: max(.66rem, 36px); height: max(.66rem, 36px); padding: 0; color: #eef2f1; cursor: pointer;
  background: linear-gradient(180deg, #3a4140, #232827); border: 1px solid rgba(255, 255, 255, .14); }
.sw-info:hover { color: var(--mint-400); border-color: var(--mint-500); }
.sw-info .icon { width: 52%; height: 52%; }
.sw-tabs { display: flex; padding: 3px; background: rgba(214, 222, 221, .55); border: 1px solid rgba(22, 27, 26, .5); border-radius: 4px;
  box-shadow: 0 .04rem .16rem rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); min-width: 0; }
.sw-tab { display: inline-flex; align-items: center; justify-content: center; gap: .1rem; min-width: max(2.3rem, 92px); height: max(.66rem, 36px); padding: 0 .22rem;
  font: inherit; font-size: max(calc(.24 * var(--t)), 13px); font-weight: 800; color: var(--sw-ink); background: none; border: 0; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.sw-tab:hover:not(.is-on) { background: rgba(255, 255, 255, .35); }
.sw-tab.is-on { color: #fff; background: linear-gradient(180deg, #2c3231, #151918); box-shadow: 0 .03rem .1rem rgba(0, 0, 0, .4); }
.sw-tab__icon { display: grid; place-items: center; }
.sw-tab__icon .icon { width: max(.28rem, 16px); height: max(.28rem, 16px); }

/* ---- body ---- */
.sw-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 4.3fr) minmax(0, 5.7fr); gap: .5rem; padding: .1rem .34rem .26rem .3rem; }
.sw-left { min-height: 0; display: flex; flex-direction: column; }
.sw-right { min-height: 0; overflow-y: auto; padding: .2rem .12rem .1rem 0; scrollbar-width: thin; scrollbar-color: rgba(22, 27, 26, .55) transparent; }
.sw-loading { margin: 1rem 0; text-align: center; color: var(--sw-ink); font-weight: 700; }

/* the left column */
.sw-detail { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .14rem; animation: sw-in 160ms var(--ease-out) backwards; }
.sw-hero { flex: none; display: flex; flex-direction: column; align-items: center; gap: .08rem; }
.sw-hero__box { position: relative; display: grid; place-items: center; width: min(3.3rem, 80%); height: max(2.1rem, 96px); background: rgba(30, 36, 35, .78);
  box-shadow: 0 .06rem .2rem rgba(0, 0, 0, .3); }
.sw-hero__box.is-art { width: max(2.1rem, 96px); }
.sw-hero__c { position: absolute; width: .26rem; height: .26rem; border: 2px solid rgba(240, 244, 243, .75); }
.sw-hero__c--tl { left: -5px; top: -5px; border-right: 0; border-bottom: 0; }
.sw-hero__c--br { right: -5px; bottom: -5px; border-left: 0; border-top: 0; }
.sw-hero__img { display: grid; place-items: center; width: max(1.5rem, 70px); height: max(1.5rem, 70px); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 66%, transparent 70%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.sw-hero__img img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 0 .08rem rgba(255, 255, 255, .25)); }
.sw-hero__box.is-art .sw-hero__img { width: 88%; height: 88%; border-radius: 0; background: none; box-shadow: none; }
.sw-hero__box.is-art .sw-hero__img img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.sw-hero__txt { font-size: max(calc(.6 * var(--t)), 28px); font-weight: 900; color: rgba(255, 255, 255, .7); }
.sw-hero__box > .sw-hero__img > .icon, .sw-hero__img > svg { width: 50%; height: 50%; color: rgba(255, 255, 255, .7); }
.sw-hero__name { margin: .04rem 0 0; font-size: max(calc(.34 * var(--t)), 17px); font-weight: 900; letter-spacing: .06em; text-shadow: 0 1px .08rem rgba(0, 0, 0, .55); }
.sw-hero__sub { font-size: max(calc(.16 * var(--t)), 11px); color: #c4ccca; }
.sw-facts { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
.sw-pill { display: inline-flex; align-items: baseline; gap: .1rem; padding: .04rem .2rem; font-size: max(calc(.19 * var(--t)), 12px); color: #dfe5e3;
  background: rgba(24, 29, 28, .86); border-radius: 999px; box-shadow: 0 .03rem .08rem rgba(0, 0, 0, .3); }
.sw-pill b { font-size: max(calc(.26 * var(--t)), 15px); color: var(--mint-400); }
.sw-pill--ghost { background: rgba(24, 29, 28, .55); }
.sw-pill--ghost b { font-size: max(calc(.2 * var(--t)), 12px); color: #eef2f1; }
.sw-kind { margin-left: auto; font-size: max(calc(.15 * var(--t)), 10px); letter-spacing: .1em; color: rgba(240, 244, 243, .7); }
.sw-text { flex: 1 1 auto; min-height: max(.8rem, 40px); overflow-y: auto; padding-right: .1rem; font-size: max(calc(.2 * var(--t)), 12px); line-height: 1.55; color: #f4f7f6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; }
.sw-text p { margin: 0; }
.sw-text .rt span, .sw-cd__desc span, .sw-cd__abil .rt span { font-size: inherit; }
.sw-text__h { margin: 0 0 .04rem; font-size: max(calc(.21 * var(--t)), 13px); color: var(--mint-300, #8ff0d2); }
.sw-text__bonds { display: flex; flex-wrap: wrap; align-items: center; gap: .08rem; margin-top: .12rem !important; font-size: max(calc(.16 * var(--t)), 11px); color: #c7cfcd; }
.sw-chip { display: inline-flex; align-items: center; gap: .05rem; padding: .02rem .1rem .02rem .05rem; font-size: max(calc(.16 * var(--t)), 11px); color: #eef2f1;
  background: rgba(24, 29, 28, .8); border: 1px solid rgba(255, 255, 255, .12); text-shadow: none; }
.sw-chip img { width: max(.22rem, 14px); height: max(.22rem, 14px); object-fit: contain; }
.sw-box { flex: none; display: flex; flex-direction: column; gap: .1rem; padding: .1rem .14rem .14rem; background: var(--sw-panel); border-top: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 .05rem .2rem rgba(0, 0, 0, .3); }
.sw-box__head { display: flex; align-items: center; justify-content: space-between; gap: .12rem; min-height: max(.4rem, 26px); }
.sw-box__k { display: inline-flex; align-items: center; gap: .08rem; font-size: max(calc(.2 * var(--t)), 12px); font-weight: 800; }
.sw-box__k .icon { width: max(.22rem, 14px); height: max(.22rem, 14px); color: #c7cfcd; }
.sw-box__k small { margin-left: .04rem; font-size: max(calc(.15 * var(--t)), 10px); color: var(--text-lo); }
.sw-box__note { min-width: 0; font-size: max(calc(.15 * var(--t)), 10px); color: #aab4b1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-box__swap { margin-right: .06rem; color: #dfe5e3; }
.sw-look { display: inline-flex; align-items: center; gap: .06rem; height: max(.4rem, 26px); padding: 0 .18rem; font: inherit; font-size: max(calc(.18 * var(--t)), 12px); font-weight: 700;
  color: #eef2f1; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; cursor: pointer; }
.sw-look:hover { border-color: var(--mint-500); color: var(--mint-300, #8ff0d2); }
.sw-look .icon { width: max(.2rem, 12px); height: max(.2rem, 12px); }
.sw-ops { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .1rem; }
.sw-op { --tc: var(--tier-1); position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, #d7dcda, #a9b1ae); border: 1px solid rgba(255, 255, 255, .5); }
.sw-op--t2 { --tc: var(--tier-2); } .sw-op--t3 { --tc: var(--tier-3); } .sw-op--t4 { --tc: var(--tier-4); }
.sw-op--t5 { --tc: var(--tier-5); } .sw-op--t6 { --tc: var(--tier-6); }
.sw-op:hover { border-color: var(--mint-400); }
.sw-op img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-op__txt { display: grid; place-items: center; height: 100%; font-weight: 900; color: rgba(17, 22, 20, .5); }
.sw-op__tier { position: absolute; left: 2px; bottom: 2px; min-width: max(.26rem, 16px); padding: 0 .03rem; font-family: var(--font-num); font-size: max(calc(.15 * var(--t)), 10px); font-weight: 900;
  line-height: max(.24rem, 15px); text-align: center; color: var(--tc); background: rgba(10, 12, 12, .85); border: 1px solid var(--tc); }
.sw-op__sub { position: absolute; right: 0; top: 0; padding: 0 .04rem; font-size: max(calc(.12 * var(--t)), 9px); font-weight: 800; color: #1a1a1a; background: var(--amber, #f2b544); }
.sw-op.is-standin img { filter: saturate(.55); }

/* enemy thumbnails */
.sw-ethumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .08rem; }
.sw-ethumbs--grid { max-height: max(1.9rem, 96px); overflow-y: auto; scrollbar-width: thin; }
.sw-ethumbs__sep { padding: 0 .04rem 0 .08rem; font-size: max(calc(.14 * var(--t)), 10px); color: #aab4b1; border-left: 1px solid rgba(255, 255, 255, .18); }
.sw-eth { position: relative; display: block; flex: none; padding: 0; overflow: hidden; background: #3a3f3e; border: 1px solid rgba(255, 255, 255, .28); }
button.sw-eth { cursor: pointer; }
button.sw-eth:hover { border-color: #fff; }
.sw-eth--sm { width: max(.74rem, 40px); height: max(.74rem, 40px); }
.sw-eth--md { width: 100%; aspect-ratio: 1; }
.sw-eth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-eth > .icon { width: 60%; height: 60%; margin: 20%; color: rgba(255, 255, 255, .4); }
.sw-eth__no { position: absolute; left: 0; top: 0; padding: 0 .05rem; font-family: var(--font-num); font-size: max(calc(.13 * var(--t)), 9px); line-height: 1.25; color: #fff; background: rgba(0, 0, 0, .78); }
.sw-eth.is-elite { border-color: rgba(242, 181, 68, .7); }
.sw-eth.is-boss { border-color: rgba(255, 120, 90, .8); }
.sw-eth.is-on { border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 .14rem rgba(255, 255, 255, .6); }

/* the right column: sections of tiles */
.sw-sec { position: relative; margin: .26rem 0 .3rem; padding-bottom: .2rem;
  background: linear-gradient(rgba(24, 29, 28, .74), rgba(24, 29, 28, .74)) top / 100% max(.62rem, 34px) no-repeat, rgba(225, 232, 231, .16);
  box-shadow: 0 .04rem .16rem rgba(0, 0, 0, .14); }
.sw-sec__head { position: relative; display: grid; place-items: center; height: max(.62rem, 34px); }
.sw-sec__glyph { position: absolute; left: 50%; top: 0; transform: translate(-50%, -62%); display: grid; place-items: center; width: max(.38rem, 22px); height: max(.38rem, 22px);
  color: var(--sw-ink); background: linear-gradient(180deg, #f2f5f4, #c5cdcb); box-shadow: 0 .02rem .08rem rgba(0, 0, 0, .35); }
.sw-sec__glyph .icon { width: 64%; height: 64%; }
.sw-sec__name { display: inline-flex; align-items: center; gap: .14rem; font-size: max(calc(.25 * var(--t)), 14px); font-weight: 800; letter-spacing: .1em; color: #f1f4f3; }
.sw-sec__name i { font-style: normal; font-weight: 300; font-size: 1.3em; color: rgba(241, 244, 243, .6); }
.sw-sec__name small { font-size: .6em; font-weight: 600; letter-spacing: 0; color: rgba(241, 244, 243, .5); }
.sw-sec__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .16rem; padding: .2rem .18rem 0; }
.sw-tile { position: relative; aspect-ratio: 1; padding: 0; overflow: visible; font: inherit; color: #eef2f1; cursor: pointer;
  background: linear-gradient(160deg, var(--sw-tile), var(--sw-tile-2)); border: 1px solid rgba(255, 255, 255, .07); border-radius: 3px;
  box-shadow: 0 .04rem .12rem rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.sw-tile:hover { transform: translateY(-2px); box-shadow: 0 .08rem .18rem rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08); }
.sw-tile.is-on { outline: 2px solid #f5f8f7; outline-offset: .05rem; box-shadow: 0 0 .2rem rgba(255, 255, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .08); }
.sw-tile__in { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: inherit; }
.sw-tile__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .02rem .06rem .04rem; font-size: max(calc(.13 * var(--t)), 9px); line-height: 1.2; text-align: center;
  color: rgba(238, 242, 241, .78); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .5)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-tile__hp { position: absolute; right: 3px; top: 3px; padding: 0 .05rem; font-size: max(calc(.13 * var(--t)), 9px); font-weight: 800; line-height: 1.35; color: var(--mint-400); background: rgba(0, 0, 0, .6); }
/* 盟约: a dark glyph on a lit disc */
.sw-disc { display: grid; place-items: center; width: 64%; aspect-ratio: 1; margin-bottom: 10%; border-radius: 50%;
  background: radial-gradient(circle, #f6faf9 0 42%, #d3dddb 64%, #9fb1ae 100%); box-shadow: 0 0 .16rem rgba(220, 240, 236, .45), inset 0 0 .06rem rgba(0, 0, 0, .25); }
.sw-disc img { width: 70%; height: 70%; object-fit: contain; filter: brightness(0); opacity: .82; }
.sw-disc__txt { font-size: max(calc(.3 * var(--t)), 15px); font-weight: 900; color: var(--sw-ink); }
/* 策略: the portrait (its own ring is part of the icon) */
.sw-face { display: grid; place-items: center; width: 92%; aspect-ratio: 1; margin-bottom: 4%; overflow: hidden; }
.sw-face img { width: 100%; height: 100%; object-fit: cover; }
.sw-face__txt { font-size: max(calc(.3 * var(--t)), 15px); font-weight: 900; }
/* 领袖: the art; 特训: a white glyph */
.sw-art { display: block; width: 84%; aspect-ratio: 1; margin-bottom: 8%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.sw-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-glyph { display: grid; place-items: center; width: 72%; aspect-ratio: 1; margin-bottom: 8%; }
.sw-glyph img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 .08rem rgba(255, 255, 255, .55)); }
.sw-glyph .icon { width: 70%; height: 70%; }
.sw-allcodex { display: flex; align-items: center; gap: .16rem; width: 100%; margin: 0 0 .1rem; padding: .14rem .22rem; font: inherit; text-align: left; color: #eef2f1; cursor: pointer;
  background: linear-gradient(90deg, rgba(24, 29, 28, .86), rgba(24, 29, 28, .62)); border: 1px solid rgba(255, 255, 255, .12); }
.sw-allcodex:hover { border-color: var(--mint-500); }
.sw-allcodex > .icon { width: max(.36rem, 20px); height: max(.36rem, 20px); color: #c7cfcd; flex: none; }
.sw-allcodex > .icon:last-child { margin-left: auto; width: max(.26rem, 16px); }
.sw-allcodex span { display: flex; flex-direction: column; }
.sw-allcodex b { font-size: max(calc(.22 * var(--t)), 13px); }
.sw-allcodex small { font-size: max(calc(.15 * var(--t)), 10px); color: #aab4b1; }

/* ---- the enemy codex ---- */
.sw-codex { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  padding: var(--sa-t, 0px) var(--sa-r, 0px) var(--sa-b, 0px) var(--sa-l, 0px);
  background: rgba(14, 17, 17, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: sw-in 160ms var(--ease-out) backwards; }
.sw-codex__top { flex: none; display: flex; align-items: center; gap: .14rem; height: max(1rem, 50px); padding: 0 .34rem 0 .26rem; }
.sw-codex__top .sw-back { padding-right: .12rem; }
.sw-codex__title { font-size: max(calc(.26 * var(--t)), 14px); font-weight: 900; letter-spacing: .1em; }
.sw-scope { display: inline-flex; align-items: center; gap: .06rem; height: max(.42rem, 26px); padding: 0 .12rem 0 .16rem; font: inherit; font-size: max(calc(.16 * var(--t)), 11px);
  color: #eef2f1; background: rgba(78, 216, 175, .14); border: 1px solid var(--mint-700); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.sw-scope .icon { width: max(.16rem, 10px); height: max(.16rem, 10px); }
.sw-search { display: inline-flex; align-items: center; gap: .06rem; margin-left: auto; height: max(.46rem, 28px); padding: 0 .12rem; background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .16); }
.sw-search .icon { width: max(.2rem, 12px); height: max(.2rem, 12px); color: #aab4b1; }
.sw-search input { width: max(1.9rem, 110px); font: inherit; font-size: max(calc(.17 * var(--t)), 12px); color: #eef2f1; background: none; border: 0; outline: none; }
.sw-codex__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: .3rem; padding: 0 .34rem .26rem .3rem; }
.sw-codex__list { min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(1.3rem, 64px), 1fr)); align-content: start; gap: .14rem;
  /* rows keep their square: the thumbnails (overflow: hidden, so no minimum height) were otherwise shrunk to fit the box */
  grid-auto-rows: max-content;
  padding: .06rem .16rem .06rem .06rem; border-right: 2px solid rgba(255, 255, 255, .5); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.sw-codex__list .sw-eth__no { font-size: max(calc(.16 * var(--t)), 10px); }
.sw-codex__empty { grid-column: 1 / -1; margin: .6rem 0; text-align: center; color: var(--text-lo); }
.sw-codex__side { min-height: 0; display: flex; flex-direction: column; gap: .12rem; }
.sw-ranks { flex: none; display: flex; align-items: stretch; height: max(.6rem, 34px); background: #0c0f0f; border: 1px solid rgba(255, 255, 255, .1); }
.sw-ranks__n { display: grid; place-items: center; min-width: max(.8rem, 42px); font-size: max(calc(.2 * var(--t)), 12px); font-weight: 800; color: #4cc3ee; border-right: 1px solid rgba(255, 255, 255, .1); }
.sw-ranks button { flex: 1 1 0; font: inherit; font-size: max(calc(.2 * var(--t)), 12px); font-weight: 700; color: #8d9794; background: none; border: 0; cursor: pointer; }
.sw-ranks button:hover:not(:disabled):not(.is-on) { color: #eef2f1; }
.sw-ranks button.is-on { color: #fff; background: #1d6f8f; }
.sw-ranks button:disabled { opacity: .35; cursor: default; }
.sw-cd { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .12rem; padding-right: .08rem; animation: sw-in 140ms var(--ease-out) backwards;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.sw-cd__head { position: relative; display: flex; flex-direction: column; gap: .02rem; min-height: max(1.1rem, 60px); }
.sw-cd__cat, .sw-cd__way { font-size: max(calc(.19 * var(--t)), 12px); color: #8f9a97; }
.sw-cd__name { display: flex; align-items: center; gap: .12rem; margin: 0; padding-right: 1.4rem; font-size: max(calc(.36 * var(--t)), 18px); font-weight: 900; line-height: 1.2; }
.sw-cd__no { padding: .02rem .12rem; font-family: var(--font-num); font-size: max(calc(.2 * var(--t)), 12px); font-weight: 700; color: #fff; background: #000; border: 1px solid rgba(255, 255, 255, .18); }
.sw-cd__lp { position: absolute; right: .06rem; top: .5rem; z-index: 1; display: inline-flex; align-items: center; gap: .04rem; color: #ff5b5b; }
.sw-cd__lp .icon { width: max(.3rem, 18px); height: max(.3rem, 18px); color: #f1f4f3; }
.sw-cd__lp b { font-size: max(calc(.3 * var(--t)), 17px); }
.sw-cd__mark { position: absolute; right: .3rem; top: -.04rem; width: max(1.3rem, 64px); height: max(1.3rem, 64px); opacity: .14; pointer-events: none; }
.sw-cd__mark img { width: 100%; height: 100%; object-fit: contain; }
.sw-cd__main { display: grid; grid-template-columns: max(1.6rem, 80px) minmax(0, 1fr); gap: .16rem; align-items: start; }
.sw-cd__art { display: flex; flex-direction: column; gap: .08rem; }
.sw-cd__img { display: block; aspect-ratio: 1; overflow: hidden; background: #3a3f3e; border: 1px solid rgba(255, 255, 255, .2); }
.sw-cd__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-cd__img > .icon { width: 60%; height: 60%; margin: 20%; color: rgba(255, 255, 255, .4); }
.sw-cd__mass { display: flex; align-items: center; gap: .06rem; padding: .03rem .1rem; font-size: max(calc(.16 * var(--t)), 10px); color: #c7cfcd; background: rgba(0, 0, 0, .55); }
.sw-cd__mass .icon { width: max(.18rem, 11px); height: max(.18rem, 11px); }
.sw-cd__mass b { margin-left: auto; font-size: max(calc(.26 * var(--t)), 14px); color: #eef2f1; }
.sw-cd__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .08rem .1rem; }
.sw-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .08rem; min-height: max(.46rem, 28px); padding: 0 .12rem;
  background: rgba(255, 255, 255, .06); border-radius: 2px; }
.sw-stat__k { display: inline-flex; align-items: center; gap: .06rem; min-width: 0; font-size: max(calc(.17 * var(--t)), 11px); color: #b9c2bf; white-space: nowrap; overflow: hidden; }
.sw-stat__k .icon { flex: none; width: max(.18rem, 11px); height: max(.18rem, 11px); color: #eef2f1; }
.sw-stat__v { font-size: max(calc(.13 * var(--t)), 9px); color: #7f8a87; }
.sw-stat__g { min-width: max(.36rem, 20px); text-align: right; font-family: var(--font-display); font-size: max(calc(.28 * var(--t)), 15px); font-weight: 800; color: #eef2f1; }
.sw-stat__g.g-S { color: #ffcf5a; } .sw-stat__g.g-Ap, .sw-stat__g.g-A { color: #ff9a5c; }
.sw-stat__g.g-C, .sw-stat__g.g-D { color: #b9c2bf; } .sw-stat__g.g-E, .sw-stat__g.g-none { color: #6f7a77; }
.sw-cd__desc { margin: 0; font-size: max(calc(.19 * var(--t)), 12px); font-style: italic; line-height: 1.55; color: #aeb7b4; }
.sw-cd__types { display: flex; flex-wrap: wrap; gap: .08rem; margin: 0; }
.sw-cd__h { margin: .04rem 0 0; padding: .06rem .14rem; font-size: max(calc(.2 * var(--t)), 12px); font-weight: 800; background: rgba(255, 255, 255, .08); }
.sw-cd__abil { margin: 0; padding: 0 .1rem 0 .3rem; display: flex; flex-direction: column; gap: .05rem; font-size: max(calc(.18 * var(--t)), 12px); line-height: 1.5; color: #e4e9e7; }

/* phones in landscape: a lower bar, slimmer columns */
@media (max-height: 520px) {
  .sw-top, .sw-codex__top { height: 44px; }
  .sw-body { gap: .3rem; padding-bottom: .16rem; }
  /* too short for a fixed column: the whole detail scrolls */
  .sw-left { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; }
  .sw-detail { flex: none; }
  .sw-text { flex: none; overflow: visible; min-height: 0; }
  .sw-hero__box { height: 64px; } .sw-hero__box.is-art { width: 64px; }
  .sw-hero__img { width: 50px; height: 50px; }
  .sw-hero__name { font-size: 15px; }
  .sw-sec__grid { gap: 8px; padding: 10px 10px 0; }
  .sw-tile__cap { display: none; }
  .sw-ops { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); }
  .sw-cd__name { font-size: 16px; }
}
/* tall / narrow windows: the detail above the tiles */
@media (max-aspect-ratio: 1/1) {
  .sw-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: .2rem; }
  .sw-left { max-height: 48vh; }
  .sw-tabs .sw-tab { min-width: 0; }
  .sw-codex__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, .8fr) minmax(0, 1.2fr); }
  .sw-codex__list { border-right: 0; border-bottom: 2px solid rgba(255, 255, 255, .5); }
}
@media (max-width: 640px) {
  .sw-back__mark { display: none; }
  .sw-tab { padding: 0 .12rem; font-size: 12px; }
  .sw-tab__icon { display: none; }
  .sw-sec__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .sw, .sw-detail, .sw-codex, .sw-cd { animation: none; }
  .sw__mist { animation: none; }
  .sw-tile { transition: none; }
}

/* ==========================================================================================
   选择模拟协议 (2026-10-13, the owner's request; lobby.js ProtocolSelect, ui/protocolScene.js): the start screen of
   独立模拟 / 同盟模拟 / 无限火力, laid out after the event's — the picture in the difficulty's colour at the left, the
   difficulty cards down the right (the chosen one slides out with a glow and the 已选定 stamp), 开始模拟 below them.
   ========================================================================================== */
.proto {
  position: fixed; inset: 0; z-index: 54; display: flex; flex-direction: column;
  padding: var(--sa-t, 0px) var(--sa-r, 0px) var(--sa-b, 0px) var(--sa-l, 0px);
  color: #eef0ef; background: #0b0c0c; overscroll-behavior: contain; animation: sw-in 200ms var(--ease-out) backwards;
}
.proto__bg { position: absolute; inset: 0; pointer-events: none; transition: background 400ms;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 4px),
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 1.1rem 1.1rem,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 1.1rem 1.1rem,
    radial-gradient(120% 90% at 50% 40%, #151616, #070808);
  background:
    radial-gradient(46% 60% at 30% 52%, color-mix(in srgb, var(--d-color) 16%, transparent), transparent 70%),
    radial-gradient(40% 50% at 100% 50%, color-mix(in srgb, var(--d-color) 10%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 4px),
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 1.1rem 1.1rem,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 1.1rem 1.1rem,
    radial-gradient(120% 90% at 50% 40%, #151616, #070808); }
.proto > :where(:not(.proto__bg)) { position: relative; }

.proto-top { flex: none; display: flex; align-items: flex-start; justify-content: space-between; padding: .18rem .34rem 0 .22rem; z-index: 2; }
.proto-back { display: inline-flex; align-items: center; height: max(.62rem, 36px); padding: 0; font: inherit; color: #f2f4f3; cursor: pointer;
  background: linear-gradient(180deg, #2b2c2d, #1b1c1d); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 .04rem .14rem rgba(0, 0, 0, .5); }
.proto-back > .icon { width: max(.4rem, 22px); height: max(.4rem, 22px); margin: 0 .3rem 0 .14rem; }
.proto-back__home { display: grid; place-items: center; align-self: stretch; width: max(2rem, 96px); border-left: 2px solid #0d0e0e;
  background: radial-gradient(circle, rgba(255, 255, 255, .22) 1px, transparent 1.6px) 0 0 / .14rem .14rem, linear-gradient(90deg, #2f3132, #3d3f40 50%, #2f3132); }
.proto-back__home .icon { width: max(.32rem, 18px); height: max(.32rem, 18px); }
.proto-back:hover { border-color: rgba(255, 255, 255, .35); }
.proto-title { display: flex; flex-direction: column; align-items: flex-end; gap: .02rem; padding-top: .06rem; }
.proto-title h2 { margin: 0; font-size: max(calc(.36 * var(--t)), 18px); font-weight: 900; letter-spacing: .06em; }
.proto-title__mode { display: inline-flex; align-items: baseline; gap: .1rem; font-size: max(calc(.16 * var(--t)), 11px); color: var(--d-color); font-weight: 700; }
.proto-title__mode i { font-style: normal; font-family: var(--font-display); font-size: .8em; letter-spacing: .16em; color: #8b8f8e; }

.proto-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) min(5.6rem, 46vw); gap: .3rem; padding: 0 .34rem .26rem .22rem; }
.proto-stage { position: relative; min-width: 0; min-height: 0; }

/* the picture */
.ps { position: absolute; inset: -.4rem 0 .9rem; width: 100%; height: calc(100% - .5rem); color: var(--d-color); transition: color 400ms; }
.ps-grid line { stroke: currentColor; stroke-opacity: .13; stroke-width: 1; }
.ps-pad polygon { fill: currentColor; fill-opacity: .1; stroke: currentColor; stroke-opacity: .55; stroke-width: 1.2; }
.ps-pad__edge { fill: none; stroke: currentColor; stroke-opacity: .7; stroke-width: 2; stroke-dasharray: 26 8; }
.ps-hull { filter: drop-shadow(0 0 6px var(--d-color)); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--d-color) 70%, transparent)); }
.ps-face { stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; fill: currentColor; }
.ps-face--top { fill-opacity: .42; } .ps-face--front { fill-opacity: .26; } .ps-face--side { fill-opacity: .16; }
.ps-seam { stroke: #fff; stroke-opacity: .35; stroke-width: 1; }
.ps-beacon { fill: #fff; animation: ps-blink 1.6s steps(2) infinite; }
@keyframes ps-blink { 50% { opacity: .2; } }
.ps-cable { fill: none; stroke: currentColor; stroke-width: 4; stroke-opacity: .75; }
.ps-fig { animation: ps-fig 360ms var(--ease-out) backwards; animation-delay: calc(var(--i) * 18ms); }
@keyframes ps-fig { from { opacity: 0; transform: translateY(-6px); } }
.ps-fig__body, .ps-fig__head { fill: currentColor; fill-opacity: .88; stroke: rgba(0, 0, 0, .45); stroke-width: .8; }
.ps-fig__head { fill-opacity: 1; }
.ps-fig__shadow { fill: #000; opacity: .35; }
.ps-spike polygon { fill: currentColor; fill-opacity: .75; filter: drop-shadow(0 0 4px var(--d-color)); }
.ps-spike__x { stroke: currentColor; stroke-width: 2; stroke-opacity: .8; }
.ps-spike { animation: ps-fig 420ms var(--ease-out) backwards; animation-delay: calc(var(--i) * 60ms + 120ms); }
.ps-call rect { fill: rgba(0, 0, 0, .55); stroke: currentColor; stroke-width: 1.5; }
.ps-call line { stroke: currentColor; stroke-width: 1.5; stroke-opacity: .8; }
.ps-call__icon { fill: currentColor !important; fill-opacity: .25; }
.ps-call__man { fill: currentColor; }
.ps-call text { fill: currentColor; font: 700 11px var(--font-num, monospace); letter-spacing: 2px; }
.ps-scan { stroke: currentColor; stroke-opacity: .22; stroke-width: 2; animation: ps-scan 7s linear infinite; }
@keyframes ps-scan { from { transform: translateY(40px); } to { transform: translateY(620px); } }

/* 选择模拟协议的画面动起来（2026-10-27, the owner's request: selena 的难度界面左半边一直在动）。四层各走各的：
   网格最慢、舰体略快、浮尘往上飘、全息图有呼吸；换难度时整幅从暗处亮起来。纯 CSS，prefers-reduced-motion 下全部停住。 */
.ps { animation: ps-in 640ms var(--ease-out) backwards; }
@keyframes ps-in { from { opacity: 0; filter: brightness(.4); } }
.ps-layer--grid { animation: ps-float-grid 34s ease-in-out infinite alternate; }
.ps-layer--ship { animation: ps-float-ship 23s ease-in-out infinite alternate; }
@keyframes ps-float-grid { from { transform: translate3d(-10px, 8px, 0); } to { transform: translate3d(10px, -8px, 0); } }
@keyframes ps-float-ship { from { transform: translate3d(6px, -5px, 0); } to { transform: translate3d(-7px, 6px, 0); } }
.ps-ship { transform-origin: 500px 320px; animation: ps-holo 7.5s ease-in-out infinite; }
@keyframes ps-holo { 0%, 100% { opacity: 1; } 50% { opacity: .86; } }
.ps-ship image { animation: ps-art-breathe 9s ease-in-out infinite; }
@keyframes ps-art-breathe { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.14) saturate(1.08); } }
.ps-hull { animation: ps-hull-breathe 6s ease-in-out infinite; }
@keyframes ps-hull-breathe { 0%, 100% { opacity: .96; } 50% { opacity: 1; } }
.ps-mote { fill: currentColor; fill-opacity: .8; animation: ps-mote-rise var(--dur, 9s) linear infinite; animation-delay: var(--delay, 0s); }
@keyframes ps-mote-rise {
  0% { transform: translate3d(0, 26px, 0); opacity: 0; }
  18% { opacity: .75; }
  82% { opacity: .5; }
  100% { transform: translate3d(14px, -120px, 0); opacity: 0; }
}
/* 难度卡片：进场逐条滑入（选中那张的位移是状态，不参与进场动画，免得跳一下），光晕来回扫 */
.proto-list .pcard:not(.is-on) { animation: pcard-in 300ms var(--ease-out) backwards; }
.proto-list .pcard:nth-child(2) { animation-delay: 50ms; }
.proto-list .pcard:nth-child(3) { animation-delay: 100ms; }
.proto-list .pcard:nth-child(4) { animation-delay: 150ms; }
@keyframes pcard-in { from { opacity: 0; transform: translateX(26px); } }
.pcard.is-on .pcard__glow { animation: pcard-glow 4.6s ease-in-out infinite; }
@keyframes pcard-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.proto-brief { position: absolute; left: .1rem; bottom: .1rem; max-width: min(6rem, 92%); padding: .12rem .2rem .14rem; background: linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .2));
  border-left: 3px solid var(--d-color); }
.proto-brief__code { margin-right: .1rem; padding: 0 .08rem; font-size: max(calc(.14 * var(--t)), 10px); color: #111; background: var(--d-color); }
.proto-brief__name { font-size: max(calc(.24 * var(--t)), 14px); color: var(--d-color); }
.proto-brief p { margin: .04rem 0 0; font-size: max(calc(.16 * var(--t)), 11px); line-height: 1.5; color: #b7bcba; }
.proto-fp { position: absolute; left: .1rem; top: .2rem; width: min(6.2rem, 96%); max-height: calc(100% - 1.6rem); overflow-y: auto; scrollbar-width: thin; }
.proto-fp .firepower-brief { margin: 0; background: rgba(8, 9, 9, .82); }

/* the difficulty cards */
.proto-side { min-height: 0; display: flex; flex-direction: column; gap: .14rem; }
.proto-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: .2rem; padding: .07rem .06rem .07rem .5rem;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.pcard { position: relative; flex: none; display: flex; flex-direction: column; gap: .04rem; padding: .16rem .26rem .16rem; overflow: hidden; font: inherit; text-align: left;
  color: #e9eceb; cursor: pointer; background: linear-gradient(180deg, #252627, #1a1b1c); border: 2px solid #55585a; border-radius: .2rem;
  box-shadow: 0 .05rem .16rem rgba(0, 0, 0, .5); transition: transform 220ms var(--ease-out), border-color 220ms; }
.pcard:hover:not(.is-on) { border-color: #7b7f81; }
.pcard.is-on { transform: translateX(-.44rem); border-color: #8f9496; }
.pcard__glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 260ms;
  background: radial-gradient(70% 140% at 100% 50%, var(--d-color), transparent 72%);
  background: radial-gradient(70% 140% at 100% 50%, color-mix(in srgb, var(--d-color) 70%, transparent), transparent 72%); }
.pcard.is-on .pcard__glow { opacity: 1; }
.pcard > :not(.pcard__glow, .pcard__stamp) { position: relative; }
.pcard.is-on > :not(.pcard__glow, .pcard__stamp) { padding-right: max(1.3rem, 70px); }
.pcard__head { display: flex; align-items: center; gap: .08rem; }
.pcard__glyph { width: max(.3rem, 18px); height: max(.3rem, 18px); color: var(--d-color); }
.pcard__name { font-size: max(calc(.3 * var(--t)), 16px); font-weight: 900; letter-spacing: .04em; color: var(--d-color); text-shadow: 0 0 .1rem rgba(0, 0, 0, .6); }
.pcard__head .mm-count, .pcard__head [class*='matchmaking'] { margin-left: auto; }
.pcard__desc { padding-bottom: .06rem; font-size: max(calc(.17 * var(--t)), 11px); color: #9a9f9d; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.pcard__effects { display: flex; flex-direction: column; padding-top: .04rem; font-size: max(calc(.19 * var(--t)), 12px); line-height: 1.45; }
.pcard__effects span::before { content: '·'; margin-right: .06rem; }
.pcard__meta { display: flex; flex-wrap: wrap; gap: .04rem .14rem; margin-top: .04rem; font-size: max(calc(.13 * var(--t)), 9px); color: #7f8583; }
.pcard__meta b { color: #cfd3d1; }
.pcard__stamp { position: absolute; right: .2rem; top: 50%; display: none; width: max(1.3rem, 70px); height: max(1.1rem, 60px); transform: translateY(-50%) rotate(-6deg);
  flex-direction: column; align-items: center; justify-content: center; gap: .04rem; }
.pcard.is-on .pcard__stamp { display: flex; animation: proto-stamp 260ms var(--ease-out) backwards; }
@keyframes proto-stamp { from { opacity: 0; transform: translateY(-50%) rotate(-6deg) scale(1.4); } }
.pcard__ring { position: absolute; inset: -.1rem -.14rem; width: calc(100% + .28rem); height: calc(100% + .2rem); }
.pcard__ring path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .9; }
.pcard__tick { display: grid; place-items: center; width: max(.46rem, 26px); height: max(.46rem, 26px); color: #2a1712; background: #f5f5f5; border-radius: .06rem; box-shadow: 0 .02rem .08rem rgba(0, 0, 0, .5); }
.pcard__tick .icon { width: 78%; height: 78%; color: var(--d-color); filter: brightness(.7); }
.pcard__ok { font-size: max(calc(.18 * var(--t)), 11px); font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

/* the foot: options, hint, 开始模拟 */
.proto-foot { flex: none; display: flex; flex-direction: column; gap: .08rem; padding-left: .5rem; }
.proto-opts { display: flex; align-items: center; justify-content: space-between; gap: .14rem; }
.proto-private { display: inline-flex; align-items: center; gap: .08rem; font-size: max(calc(.17 * var(--t)), 12px); color: #c9cecc; cursor: pointer; }
.proto-private input { width: max(.22rem, 15px); height: max(.22rem, 15px); accent-color: var(--mint-500); }
.proto-hint { margin: 0; font-size: max(calc(.14 * var(--t)), 10px); color: #858b89; }
.proto-start { position: relative; display: flex; align-items: center; gap: .26rem; width: 100%; height: max(1.04rem, 54px); padding: 0 0 0 .26rem; overflow: hidden;
  font: inherit; color: #0d2a23; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, #4fe0bf, #34c8a6); border: 3px solid #121313; box-shadow: 0 0 0 1px rgba(79, 224, 191, .5), 0 .06rem .2rem rgba(0, 0, 0, .55);
  transition: filter var(--t-fast); }
.proto-start:hover:not(:disabled) { filter: brightness(1.07); }
.proto-start:disabled { filter: grayscale(.8) brightness(.6); cursor: default; }
.proto-start__mark { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.proto-start__rook { display: inline-flex; align-items: center; gap: 2px; font-size: max(calc(.36 * var(--t)), 20px); font-weight: 300; line-height: 1; }
.proto-start__rook i { font-style: normal; }
.proto-start__rook .icon { width: max(.34rem, 19px); height: max(.34rem, 19px); }
.proto-start__mark small { font-family: var(--font-display); font-size: max(calc(.08 * var(--t)), 6px); font-weight: 800; letter-spacing: .06em; line-height: 1.1; text-align: center; }
.proto-start__label { display: inline-flex; align-items: center; gap: .1rem; font-size: max(calc(.44 * var(--t)), 22px); font-weight: 900; letter-spacing: .08em; }
.proto-start__deco { position: absolute; right: 0; top: 0; bottom: 0; width: 26%; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .28) 0 5px, transparent 5px 11px), linear-gradient(90deg, rgba(13, 42, 35, .2), rgba(13, 42, 35, .6)); }

@media (max-height: 520px) {
  .proto-top { padding-top: 8px; }
  .proto-body { grid-template-columns: minmax(0, 1fr) min(5.6rem, 48vw); gap: 10px; }
  .proto-list { gap: 8px; padding-left: 22px; }
  .pcard { padding: 8px 12px; }
  .pcard.is-on { transform: translateX(-16px); }
  .pcard__meta { display: none; }
  .proto-foot { padding-left: 22px; }
  .proto-brief p { display: none; }
  /* phones: the side column is ~220px — the 已选定 stamp padding squeezed 标准模拟 to one character a line, the chips and
     创建无限火力 wrapped, and the 4-column 无限火力 rules were a few characters wide */
  .pcard.is-on > :not(.pcard__glow, .pcard__stamp) { padding-right: 0; }
  .pcard.is-on > .pcard__desc, .pcard.is-on > .pcard__effects { padding-right: 58px; }
  .pcard.is-on .pcard__stamp { right: 8px; width: 54px; height: 48px; }
  .pcard__name { white-space: nowrap; }
  .pcard__head { flex-wrap: wrap; }
  .proto-opts { flex-wrap: wrap; gap: 4px 8px; }
  .proto-opts > *, .proto-mode-chip { white-space: nowrap; }
  .proto-start { height: 46px; gap: 10px; padding-left: 10px; }
  .proto-start__label { font-size: 18px; letter-spacing: .02em; white-space: nowrap; }
  .proto-fp .firepower-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-aspect-ratio: 1/1) {
  .proto-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, .8fr) minmax(0, 1.2fr); }
  .proto-fp { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .proto, .ps-fig, .ps-spike, .pcard.is-on .pcard__stamp { animation: none; }
  .ps-scan, .ps-beacon { animation: none; }
  .ps, .ps-layer, .ps-ship, .ps-ship image, .ps-hull, .ps-mote, .proto-list .pcard, .pcard.is-on .pcard__glow { animation: none; }
}

/* ==========================================================================================
   房间与搜寻流程 (2026-10-13, the owner's request; js/ui/matchFlow.js, lobby.js AllianceSelect, room.js): 搜寻中 /
   搜寻成功 panels, 选择同盟方式, the room's tall seat cards and its bottom pill.
   ========================================================================================== */
/* ---- shared: brand, 搜寻中, 搜寻成功 ---- */
.mf-brand { display: inline-flex; align-items: center; gap: .1rem; font-family: var(--font-display); font-size: max(calc(.2 * var(--t)), 12px); letter-spacing: .12em; color: #8d9391; }
.mf-brand__rook { display: inline-flex; align-items: center; gap: 1px; font-weight: 300; }
.mf-brand__rook i { font-style: normal; }
.mf-brand__rook .icon { width: 1.05em; height: 1.05em; }
.mf-search { display: flex; flex-direction: column; align-items: center; gap: .14rem; padding: .5rem .3rem .3rem; text-align: center; color: #eef0ef; }
.mf-search__title { display: flex; align-items: baseline; gap: .1rem; margin: .06rem 0 0; font-size: max(calc(.5 * var(--t)), 24px); font-weight: 900; letter-spacing: .08em;
  text-shadow: 0 0 .24rem rgba(255, 255, 255, .35); }
.mf-search__dots { display: inline-block; width: 1.2em; text-align: left; }
.mf-search__title small { font-size: .42em; font-weight: 700; letter-spacing: 0; color: #c9cecc; text-shadow: none; }
.mf-search__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem; }
.mf-tag { --tag: #8d9391; display: inline-flex; align-items: center; gap: .06rem; padding: .04rem .16rem; font-size: max(calc(.18 * var(--t)), 12px); font-weight: 700; color: #eef0ef;
  background: #2a2d2d; background: color-mix(in srgb, var(--tag) 26%, #1b1d1d); border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--tag); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag) 45%, transparent); }
.mf-tag .icon { width: max(.2rem, 13px); height: max(.2rem, 13px); color: var(--tag); }
.mf-search__scene { position: relative; width: min(100%, 4.6rem); padding: .16rem .3rem; }
.mf-cross { position: absolute; width: .16rem; height: .16rem; }
.mf-cross::before, .mf-cross::after { content: ''; position: absolute; background: rgba(78, 216, 175, .55); }
.mf-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; } .mf-cross::after { top: 50%; left: 0; right: 0; height: 1px; }
.mf-cross--tl { left: .1rem; top: 0; } .mf-cross--tr { right: .1rem; top: 0; } .mf-cross--bl { left: .1rem; bottom: 0; } .mf-cross--br { right: .1rem; bottom: 0; }
.mf-scout { display: block; width: 100%; height: auto; overflow: visible; }
.mf-scout__wave { fill: none; stroke: rgba(78, 216, 175, .35); stroke-width: 6; filter: blur(2px); animation: mf-wave 3s ease-in-out infinite alternate; }
@keyframes mf-wave { to { transform: translateX(-12px); } }
.mf-scout__sky { fill: #48e2b6; opacity: .9; animation: mf-sky 4s linear infinite; }
@keyframes mf-sky { from { transform: translateX(0); } to { transform: translateX(-120px); } }
.mf-scout__bot rect { fill: #5df0c6; }
.mf-scout__bot { animation: mf-hop .5s steps(2) infinite; }
@keyframes mf-hop { 50% { transform: translateY(-3px); } }
.mf-scout__eye { fill: #0b2620 !important; animation: mf-blink 3s steps(1) infinite; }
@keyframes mf-blink { 0%, 92% { opacity: 1; } 94%, 100% { opacity: 0; } }
.mf-scout__leg--a { animation: mf-leg .3s steps(2) infinite; } .mf-scout__leg--b { animation: mf-leg .3s steps(2) infinite reverse; }
@keyframes mf-leg { 50% { transform: translateY(-3px); } }
.mf-scout__ground { stroke: rgba(93, 240, 198, .5); stroke-width: 2; stroke-dasharray: 6 4; }
.mf-scout text { fill: #5df0c6; font: 700 8px var(--font-num, monospace); letter-spacing: 2px; opacity: .8; }
.mf-search__tip { min-height: 2.8em; margin: 0; max-width: 5rem; font-size: max(calc(.2 * var(--t)), 12px); line-height: 1.45; color: #e6e9e8; animation: sw-in 300ms var(--ease-out) backwards; }
.mf-search__note { margin: 0; font-size: max(calc(.15 * var(--t)), 10px); color: #8d9391; }
.mf-stop { display: inline-flex; align-items: center; gap: .12rem; margin-top: auto; align-self: flex-end; height: max(.62rem, 36px); padding: 0 .3rem 0 .14rem;
  font: inherit; font-size: max(calc(.24 * var(--t)), 14px); font-weight: 800; color: #ffd9d9; cursor: pointer;
  background: linear-gradient(90deg, rgba(120, 24, 34, .85), rgba(70, 14, 20, .85)); border: 1px solid rgba(255, 120, 130, .55); }
.mf-stop:hover:not(:disabled) { filter: brightness(1.15); }
.mf-stop__x { display: grid; place-items: center; width: max(.34rem, 20px); height: max(.34rem, 20px); border: 2px solid currentColor; border-radius: 3px; }
.mf-stop__x .icon { width: 80%; height: 80%; }
.mf-found { display: flex; flex-direction: column; align-items: center; gap: .08rem; padding: .3rem .3rem .4rem; color: #eafff8; text-align: center;
  background: radial-gradient(80% 50% at 50% 30%, rgba(90, 255, 205, .3), transparent 70%), linear-gradient(180deg, #2bb892, #155f4d 55%, #0d3b31);
  animation: mf-found-in 260ms var(--ease-out) backwards; }
@keyframes mf-found-in { from { opacity: 0; transform: translateX(.4rem); } }
.mf-found .mf-brand { color: #c9fff0; }
.mf-found__lines { width: 100%; max-height: 52%; flex: 1 1 auto; }
.mf-found__lines path { fill: none; stroke: #8dffd9; stroke-width: 2; stroke-opacity: .55; stroke-dasharray: 420; stroke-dashoffset: 420;
  animation: mf-line 900ms var(--ease-out) forwards; animation-delay: calc(var(--k) * 40ms); }
@keyframes mf-line { to { stroke-dashoffset: 0; } }
.mf-found__node { fill: #b7ffe8; stroke: #0d3b31; stroke-width: 2; }
.mf-found__face svg { width: max(1.1rem, 60px); height: max(1.1rem, 60px); }
.mf-found__face rect:first-child { fill: #5df0c6; }
.mf-found__eye { fill: #0d3b31; }
.mf-found__wink, .mf-found__smile { fill: none; stroke: #0d3b31; stroke-width: 4; stroke-linecap: round; }
.mf-found__title { font-size: max(calc(.46 * var(--t)), 22px); font-weight: 900; letter-spacing: .08em; color: #b7ffe8; text-shadow: 0 0 .2rem rgba(0, 0, 0, .3); }
.mf-found__sub { font-size: max(calc(.18 * var(--t)), 12px); color: #d5fff2; }

/* 搜寻队友 while searching: the panel in place of the cards */
.proto-side--search { justify-content: stretch; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .55) 30%); }
.proto-side--search .mf-search { flex: 1 1 auto; }
.proto-mode-chip { display: inline-flex; align-items: center; gap: .06rem; padding: .04rem .16rem; font-size: max(calc(.17 * var(--t)), 12px); font-weight: 700; color: #e9eceb;
  background: #2a2c2d; border-radius: 999px; }
.proto-mode-chip .icon { width: max(.2rem, 13px); height: max(.2rem, 13px); }

/* ---- 选择同盟方式 ---- */
.ally__bg { background:
    radial-gradient(40% 55% at 30% 52%, rgba(46, 210, 160, .12), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 4px),
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 1.1rem 1.1rem,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 1.1rem 1.1rem,
    radial-gradient(120% 90% at 50% 40%, #141616, #070808); }
.ally__mode { color: var(--mint-400); }
.ally-stage { position: relative; min-height: 0; }
.mf-radar { position: absolute; inset: 0 0 .8rem; width: 100%; height: calc(100% - .8rem); }
.mf-radar__grid line { stroke: rgba(78, 216, 175, .08); stroke-width: 1; }
.mf-radar__land path { fill: rgba(150, 170, 165, .1); stroke: rgba(150, 170, 165, .2); stroke-width: 1; }
.mf-radar__ring { fill: none; stroke: rgba(78, 216, 175, .25); stroke-width: 1.5; }
.mf-radar__ring--far { fill: rgba(30, 140, 110, .1); }
.mf-radar__ring--core { stroke: rgba(78, 216, 175, .75); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(78, 216, 175, .6)); }
.mf-radar__sweep { transform-origin: 270px 250px; animation: mf-sweep 4.5s linear infinite; }
.mf-radar__sweep path { fill: rgba(60, 230, 180, .22); }
.mf-radar__sweep line { stroke: #5df0c6; stroke-width: 3; filter: drop-shadow(0 0 6px #5df0c6); }
@keyframes mf-sweep { to { transform: rotate(360deg); } }
.mf-radar__blip { fill: #ffc53d; filter: drop-shadow(0 0 8px #ffc53d); animation: mf-blip 2.2s ease-in-out infinite; }
.mf-radar__blip--b { fill: #5df0c6; filter: drop-shadow(0 0 6px #5df0c6); animation-delay: 1.1s; }
@keyframes mf-blip { 50% { opacity: .2; } }
.mf-radar__cross { stroke: #5df0c6; stroke-width: 3; }
.mf-radar__read rect { fill: rgba(0, 0, 0, .5); stroke: rgba(78, 216, 175, .45); }
.mf-radar__read text { fill: #9fe9d3; font: 700 14px var(--font-num, monospace); }
.mf-radar__frame { fill: none; stroke: rgba(78, 216, 175, .35); stroke-width: 2; }
.ally-guide { position: absolute; left: .1rem; bottom: .1rem; display: inline-flex; align-items: center; gap: .14rem; height: max(.64rem, 38px); padding: 0 .3rem 0 .1rem;
  font: inherit; font-size: max(calc(.22 * var(--t)), 13px); font-weight: 800; color: #1a1d1c; cursor: pointer; background: linear-gradient(180deg, #e9edeb, #c3cac7);
  border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 .04rem .14rem rgba(0, 0, 0, .5); }
.ally-guide:hover { filter: brightness(1.06); }
.ally-guide__icon { display: grid; place-items: center; width: max(.46rem, 28px); height: max(.4rem, 24px); color: #e9edeb; background: #2a2f2d; }
.ally-guide__icon .icon { width: 64%; height: 64%; }
.ally-body { grid-template-columns: minmax(0, 1fr) min(7.4rem, 42vw); }
.ally-side { min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: .16rem; padding: .1rem 0 .1rem .3rem; overflow-y: auto; scrollbar-width: thin; }
.ally-card__art { flex: 1 1 auto; display: grid; place-items: center; }
.ally-card { position: relative; flex: none; display: flex; flex-direction: column; width: 100%; padding: 0; overflow: hidden; font: inherit; color: #eef0ef; text-align: left;
  background: radial-gradient(70% 90% at 50% 40%, #161a19, #090a0a); border: 1px solid rgba(255, 255, 255, .14); border-radius: .08rem;
  box-shadow: 0 .06rem .2rem rgba(0, 0, 0, .5); }
button.ally-card { cursor: pointer; }
button.ally-card:hover:not(:disabled) { border-color: rgba(93, 240, 198, .6); }
button.ally-card:disabled { filter: grayscale(.7) brightness(.7); cursor: default; }
.ally-card__art { display: block; padding: .1rem .2rem 0; }
.mf-art { display: block; width: 100%; height: auto; }
.mf-art text { font: 700 8px var(--font-display, monospace); letter-spacing: 2px; fill: currentColor; opacity: .7; }
.mf-art--create { color: #5df0c6; }
.mf-art--create .mf-art__wire { fill: none; stroke: rgba(93, 240, 198, .45); stroke-width: 2; }
.mf-art--create .mf-art__oct { fill: #2fd6a6; filter: drop-shadow(0 0 10px rgba(93, 240, 198, .6)); }
.mf-art--create .mf-art__plus { stroke: #08221b; stroke-width: 7; stroke-linecap: square; }
.mf-art--create .mf-art__brk { fill: none; stroke: #5df0c6; stroke-width: 4; }
.mf-art--create .mf-art__dot { fill: #5df0c6; }
.mf-art--join { color: #ff9a3c; }
.mf-art--join .mf-art__wire { fill: none; stroke: rgba(255, 154, 60, .6); stroke-width: 2; }
.mf-art--join .mf-art__tri { fill: #ff9a3c; }
.mf-art--join .mf-art__target { fill: rgba(255, 154, 60, .15); stroke: #ff9a3c; stroke-width: 2; }
.mf-art--join .mf-art__x { stroke: #ff9a3c; stroke-width: 3; }
.mf-blk path { stroke: rgba(0, 0, 0, .5); stroke-width: 1; }
.mf-blk__top { fill: #3a3d3d; } .mf-blk__l { fill: #2a2c2c; } .mf-blk__r { fill: #1f2121; }
.mf-blk.is-lit .mf-blk__top { fill: #f0a35a; } .mf-blk.is-lit .mf-blk__l { fill: #c96b23; } .mf-blk.is-lit .mf-blk__r { fill: #a5541a; }
.mf-blk.is-lit { animation: mf-blk 2.4s ease-in-out infinite; animation-delay: calc(var(--k) * 120ms); }
@keyframes mf-blk { 50% { transform: translateY(-3px); } }
.ally-card__bar { position: relative; display: flex; align-items: center; gap: .14rem; height: max(.74rem, 42px); padding: 0 .2rem; font-size: max(calc(.3 * var(--t)), 16px); font-weight: 900;
  letter-spacing: .06em; color: #08221b; background: linear-gradient(180deg, #4fe8c0, #2fcf9f); border: 0; font-family: inherit; text-align: left; }
.ally-card__bar { white-space: nowrap; }
.ally-card__bar small { flex: 0 1 auto; margin-left: auto; min-width: min(100%, 10em); white-space: normal; text-align: right; text-wrap: balance;
  line-height: 1.2; font-size: max(calc(.14 * var(--t)), 10px); font-weight: 700; letter-spacing: 0; color: rgba(8, 34, 27, .75); }
.ally-pill { white-space: nowrap; }
@media (max-width: 700px) { .ally-card__bar small { display: none; } .ally-card__art { padding-top: 4px; } }
.ally-card__bar--join { width: 100%; color: #2a1404; background: linear-gradient(180deg, #ffb24f, #f08a26); cursor: pointer; }
.ally-card__bar--join:disabled { filter: grayscale(.6) brightness(.75); cursor: default; }
.ally-card__bar--join:hover:not(:disabled) { filter: brightness(1.06); }
.ally-card__icon { display: grid; place-items: center; width: max(.36rem, 22px); height: max(.36rem, 22px); color: currentColor; background: rgba(0, 0, 0, .14); border: 2px solid currentColor; border-radius: 4px; }
.ally-card__icon .icon { width: 74%; height: 74%; }
.ally-links { display: flex; justify-content: flex-end; gap: .1rem; margin: -.04rem 0; }
.ally-pill { display: inline-flex; align-items: center; gap: .08rem; height: max(.5rem, 30px); padding: 0 .2rem; font: inherit; font-size: max(calc(.2 * var(--t)), 12px); font-weight: 700;
  color: #eef0ef; background: linear-gradient(180deg, #2c2f2f, #1b1d1d); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; cursor: pointer; }
.ally-pill:hover { border-color: rgba(255, 255, 255, .45); }
.ally-pill .icon { width: max(.2rem, 13px); height: max(.2rem, 13px); }
.ally-pill b { min-width: max(.24rem, 16px); padding: 0 4px; font-size: .8em; text-align: center; color: #2a1404; background: #ff9a3c; border-radius: 999px; }
.ally-pill__mark { width: max(.22rem, 14px); height: max(.22rem, 14px); background: conic-gradient(#ff9a3c 0 25%, transparent 0 50%, #ff9a3c 0 75%, transparent 0); }
.ally-key { display: flex; align-items: center; gap: .1rem; margin: .06rem .2rem .1rem; padding: 0 .06rem 0 .12rem; height: max(.56rem, 34px); background: #262929;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: .06rem; }
.ally-key > .icon { flex: none; width: max(.24rem, 15px); height: max(.24rem, 15px); color: #c9cecc; }
.ally-key input { flex: 1 1 auto; min-width: 0; height: 100%; font: inherit; font-size: max(calc(.22 * var(--t)), 13px); font-weight: 700; letter-spacing: .08em; text-align: center;
  color: #f2f4f3; background: none; border: 0; outline: none; text-transform: uppercase; }
.ally-key input::placeholder { color: #8d9391; font-weight: 500; letter-spacing: .04em; text-transform: none; }
.ally-key__spec { display: inline-flex; align-items: center; gap: .04rem; height: 80%; padding: 0 .12rem; font: inherit; font-size: max(calc(.15 * var(--t)), 11px); color: #eef0ef;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px; cursor: pointer; }
.ally-key__spec .icon { width: 1.1em; height: 1.1em; }
.ally-recent { display: flex; flex-wrap: wrap; justify-content: center; gap: .06rem; margin: -.04rem .2rem .1rem; }

/* ---- the room (room.js) ---- */
.rs { background: #0a0b0b; color: #eef0ef; }
.rs__bg { position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 4px),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 1.1rem 1.1rem,
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 1.1rem 1.1rem,
    radial-gradient(120% 90% at 50% 30%, #161818, #070808);
  background:
    radial-gradient(60% 50% at 30% 40%, color-mix(in srgb, var(--mint-500) 7%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 4px),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 1.1rem 1.1rem,
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 1.1rem 1.1rem,
    radial-gradient(120% 90% at 50% 30%, #161818, #070808); }
.rs > :where(:not(.rs__bg, .mf-search, .mf-found, .rs-proto, .modal)) { position: relative; }
.rs-top { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: .2rem; padding: .16rem .3rem 0 .22rem; z-index: 3; }
.rs-top__left { display: flex; align-items: center; gap: .16rem; min-width: 0; }
.rs-exit { display: grid; place-items: center; width: max(.6rem, 36px); height: max(.6rem, 36px); padding: 0; color: #1b1e1d; cursor: pointer;
  background: linear-gradient(180deg, #e3e7e5, #b7bfbc); border: 0; border-radius: .06rem; box-shadow: 0 .03rem .1rem rgba(0, 0, 0, .5); }
.rs-exit:hover { filter: brightness(1.08); }
.rs-exit .icon { width: 60%; height: 60%; }
.rs-clock { display: flex; flex-direction: column; gap: .02rem; min-width: 0; }
.rs-clock > b { display: inline-flex; align-items: center; gap: .1rem; font-size: max(calc(.2 * var(--t)), 13px); font-weight: 700; white-space: nowrap; }
.rs-clock__sep { width: 1px; height: .9em; background: rgba(255, 255, 255, .3); }
.rs-clock > span { font-size: max(calc(.16 * var(--t)), 11px); color: #9aa19e; }
.rs-ping { margin: 0 2px; } .rs-ping--low { color: #8fef5a; } .rs-ping--mid { color: #ffc53d; } .rs-ping--high, .rs-ping--off { color: #ff6b6b; }
/* 顶栏行高统一（维护者 2026-10-20）：已连接 / 服务状态 / 三个方形按钮 / 延迟 都是同一个方块高，
   延迟挪到最末，数字用等宽字形 + 固定宽度，等待时间同理，免得每秒/每次测量把这一排顶得左右抖。 */
.rs-top__left { --rs-ctl-h: .36rem; } /* same as .btn--square.btn--sm */
.rs-top .latency-status { align-items: stretch; flex: none; flex-wrap: nowrap; height: var(--rs-ctl-h); }
.rs-top .latency-status > .connection-status,
.rs-top .latency-status .server-load-button,
.rs-top .rs-tools .rs-pingpill { height: var(--rs-ctl-h); min-height: 0; padding-block: 0; box-sizing: border-box; }
.rs-top .latency-status .tt-anchor { display: inline-flex; height: var(--rs-ctl-h); } /* the service pill sits in a Tooltip anchor */
.rs-top .connection-status, .rs-top .server-load-button { padding-inline: calc(7px * var(--ui)); }
.rs-top .rs-pingpill { align-items: center; flex: none; min-height: 0; }
.rs-top .rs-tools .latency-status > * { min-height: 0; }
.rs-top .rs-pingpill .ping__value, .rs-top .rs-clock .num { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
.rs-top .rs-pingpill .ping__value { min-width: 4ch; }
.rs-top .rs-clock .num { min-width: 5.2ch; }
.rs-tools { display: flex; gap: .08rem; margin-left: .1rem; }
.rs-key { display: flex; align-items: center; gap: .14rem; height: max(.56rem, 34px); padding: 0 .06rem 0 .2rem; background: rgba(28, 30, 30, .9); border: 1px solid rgba(255, 255, 255, .1); border-radius: .06rem; }
.rs-key__k { font-size: max(calc(.17 * var(--t)), 11px); color: #b7bdbb; padding-right: .14rem; border-right: 1px solid rgba(255, 255, 255, .25); }
.rs-key__code { font-size: max(calc(.28 * var(--t)), 16px); letter-spacing: .06em; color: #f2f4f3; }
.rs-key__copy { height: 78%; padding: 0 .26rem; font: inherit; font-size: max(calc(.2 * var(--t)), 12px); font-weight: 800; color: #1b1e1d; background: linear-gradient(180deg, #e9edeb, #c3cac7);
  border: 0; border-radius: .05rem; cursor: pointer; }
.rs-key__copy:hover { filter: brightness(1.06); }
.rs-key__copy, .rs-key__code { white-space: nowrap; }
.rs-key__link { display: grid; place-items: center; width: max(.44rem, 28px); height: 78%; padding: 0; color: #c9cecc; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15); border-radius: .05rem; cursor: pointer; }
.rs-key__link .icon { width: 60%; height: 60%; }
/* 邀请好友 (ui/friends.js panel; the owner, 2026-10-14: the tools' icon alone was not found) */
.rs-key__friends { display: inline-flex; align-items: center; gap: .06rem; height: 78%; padding: 0 .2rem; font: inherit; font-size: max(calc(.2 * var(--t)), 12px);
  font-weight: 800; white-space: nowrap; color: #1d1405; background: linear-gradient(180deg, #ffd27a, #f0a93a); border: 0; border-radius: .05rem; cursor: pointer; }
.rs-key__friends:hover { filter: brightness(1.06); }
.rs-key__friends .icon { width: max(.24rem, 14px); height: max(.24rem, 14px); }
.rs-key--solo { gap: .1rem; padding-right: .2rem; font-size: max(calc(.16 * var(--t)), 11px); color: #b7bdbb; }

.rs-seats { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; justify-content: center; gap: max(.3rem, 2.2vw); padding: .3rem .4rem .1rem;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.rs--big .rs-seats { justify-content: flex-start; gap: max(.22rem, 1.7vw); }
/* 按住鼠标左右拖动（ui/dragScroll.js）：拖起来时整条带子跟着手走，光标变成抓握、别顺手选中文字。 */
.rs-seats.is-dragging { cursor: grabbing; user-select: none; }
.rs-seats.is-dragging * { cursor: grabbing; user-select: none; }
.rseat { --w: min(18vw, 3.4rem); position: relative; flex: none; width: var(--w); display: flex; flex-direction: column;
  animation: sw-in 260ms var(--ease-out) backwards; animation-delay: calc(var(--i) * 60ms); }
/* 界面#14 (维护者 2026-10-25): a bigger 同盟 compresses nobody — 8–20 seats keep the four-seat card size and the row
   scrolls sideways (drag / wheel / scrollbar), instead of squeezing every 立绘 and 名片 into the window. */
.rs--big .rseat { --w: min(18vw, 3.4rem); }
/* 独立模拟也按四人房的席位宽度（界面#15 反馈：单人/同盟的立绘大小要一致） */
.rs--solo .rseat { --w: min(18vw, 3.4rem, calc((100vw - 1.6rem) / 4 - .3rem)); }
/* 界面#15: claiming an empty seat (co-op, before the match) and the four-a-group dividers of an 8–20 seat room. */
.rseat__move { margin: .06rem 0 0; padding: .05rem .1rem; display: flex; align-items: center; justify-content: center; gap: .05rem;
  font-size: max(calc(.11 * var(--t)), 10px); color: var(--mint-200); background: rgba(78, 216, 175, .08);
  border: 1px dashed rgba(78, 216, 175, .45); cursor: pointer; }
.rseat__move:hover { background: rgba(78, 216, 175, .16); border-style: solid; }
.rseat__move[disabled] { opacity: .5; cursor: default; }
.rseat-sep { flex: none; align-self: stretch; width: 1px; margin: .1rem .08rem .3rem; position: relative;
  border-left: 1px dashed rgba(200, 206, 208, .55); }
.rseat-sep span { position: absolute; left: 50%; top: .06rem; transform: translateX(-50%); writing-mode: vertical-rl;
  font-size: max(calc(.1 * var(--t)), 9px); letter-spacing: .18em; color: rgba(200, 206, 208, .55); background: var(--bg-1); padding: .04rem 0; }

.rseat__clip { position: absolute; left: 50%; top: -.14rem; width: .16rem; height: .2rem; transform: translateX(-50%); background: #3a3e3d; border: 2px solid #1a1c1c; z-index: 2; }
.rseat.is-ready .rseat__clip { background: #4fe8c0; }
.rseat__strip { position: relative; display: flex; align-items: center; justify-content: space-between; height: max(.26rem, 16px); padding: 0 .08rem; background: #2b2e2e; }
.rseat__strip i { width: .5rem; height: 4px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 3px, transparent 3px 5px); }
.rseat__strip span { font-size: max(calc(.12 * var(--t)), 9px); color: #8d9391; }
.rseat.is-ready .rseat__strip { background: #4fe8c0; }
.rseat.is-ready .rseat__strip i { background: repeating-linear-gradient(90deg, rgba(8, 34, 27, .6) 0 3px, transparent 3px 5px); }
.rseat.is-ready .rseat__strip span { color: #08221b; }
.rseat__art { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, #1f2222, #141616);
  border: 2px solid #2b2e2e; border-top: 0; }
.rseat.is-ready .rseat__art { border-color: #4fe8c0; box-shadow: 0 0 .2rem rgba(79, 232, 192, .35); }
.rseat__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.rseat.is-ready .rseat__art::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, transparent, rgba(47, 207, 159, .85)); pointer-events: none; }
/* 皮肤立绘（连背景那张 illustration）：铺满整张席位卡，底部用中性暗渐变收边，不叠薄荷色 */
.rseat__art img.is-scene { object-position: 50% 22%; filter: none; }
.rseat__art--painted { background: #101312; }
.rseat__art--painted::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 12, 11, .28) 0%, rgba(8, 12, 11, 0) 22%, rgba(8, 12, 11, 0) 58%, rgba(8, 12, 11, .88) 100%); }
.rseat.is-ready .rseat__art--painted::after { background: linear-gradient(180deg, transparent, rgba(10, 14, 13, .55)); }
/* 透明全身立绘（精一）：同一取景，但不铺暗底、不加中性渐变 */
.rseat__art img.is-scene[src$='_e1.webp'] { object-position: 50% 16%; }
.rseat__glyph { font-size: max(calc(.9 * var(--t)), 40px); font-weight: 900; color: rgba(255, 255, 255, .25); }
.rseat__glyph .icon { width: max(1rem, 50px); height: max(1rem, 50px); }
.rseat__host { position: absolute; top: .14rem; left: 50%; transform: translateX(-50%); z-index: 1; padding: .02rem .18rem; font-size: max(calc(.18 * var(--t)), 12px); font-weight: 800;
  color: #08221b; background: #4fe8c0; border-radius: .04rem; white-space: nowrap; }
.rseat__lost { position: absolute; left: 0; right: 0; top: 40%; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .1rem; padding: .14rem 0;
  font-size: max(calc(.24 * var(--t)), 14px); font-weight: 800; color: #ff7a8a; background: rgba(80, 10, 18, .85); }
.rseat__lost .icon { width: 1.2em; height: 1.2em; }
.rseat.is-offline .rseat__art img { filter: grayscale(.8) brightness(.6); }
.rseat__state { position: absolute; left: 0; right: 0; bottom: .14rem; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .1rem;
  font-size: max(calc(.26 * var(--t)), 14px); font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.rseat:not(.is-ready) .rseat__state { color: #c9cecc; font-size: max(calc(.2 * var(--t)), 12px); }
.rseat__box { display: grid; place-items: center; width: max(.34rem, 20px); height: max(.34rem, 20px); border: 2px solid currentColor; border-radius: 4px; background: rgba(0, 0, 0, .25); }
.rseat__box .icon { width: 80%; height: 80%; }
.rseat__kick { position: absolute; right: -.08rem; top: -.12rem; z-index: 3; display: inline-flex; align-items: center; height: max(.4rem, 24px); padding: 0 .1rem; color: #ff8a96;
  background: #3b1218; border: 1px solid rgba(255, 120, 130, .6); border-radius: 999px; cursor: pointer; }
.rseat__kick .icon { width: max(.2rem, 12px); height: max(.2rem, 12px); }
.rseat__kick .icon + .icon { width: max(.14rem, 9px); margin-left: -2px; }
.rseat__kick:hover:not(:disabled) { filter: brightness(1.3); }
.rseat__plate { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .1rem; align-items: center; align-content: center;
  min-height: max(.86rem, 72px); margin-top: .08rem; padding: .06rem .12rem; background: linear-gradient(90deg, #232626, #161818); border: 1px solid rgba(255, 255, 255, .1); }
/* 席位卡按名片画幅 (维护者 2026-10-27): 名片一律 4:1，高度 = 席位宽 / 4，直接由 --w 算出来，内容顶不开它（小屏窄到比
   min-height 还矮时仍让位给 min-height，那时头像与两行文字必须放得下）。底色图在 --nc-ar 上用同一个 4:1。
   头像跟着席位宽走：4:1 的卡片比 2026-10-25 那版矮两成，固定 .74rem 会把下巴裁掉。 */
.rseat__plate { height: calc(var(--w) / 4); width: 100%; box-sizing: border-box; overflow: hidden; }
/* 名片 (维护者 2026-10-25): 席位卡下面那张和大厅右上角的名片一样高、头像一样大 —— .hub-topbar .me-card */
.rseat__plate .avatar { --av: calc(var(--w) / 5); }
.rseat__plate .rseat__who { gap: .08rem; font-size: max(calc(.19 * var(--t)), 13px); }
.rseat.is-ready .rseat__plate { border-color: rgba(79, 232, 192, .55); }
.rseat.is-me .rseat__plate { background: linear-gradient(90deg, #26302d, #161a19); }
.rseat__plate .avatar { grid-row: 1 / 3; }
.rseat__who { display: flex; align-items: center; gap: .06rem; min-width: 0; font-size: max(calc(.18 * var(--t)), 12px); }
.rseat__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rseat__doc { font-size: max(calc(.11 * var(--t)), 8px); letter-spacing: .1em; color: #7f8583; }
.rseat__plate--empty { border-style: dashed; border-color: rgba(255, 255, 255, .12); background: none; }
.rseat--empty .rseat__art { background: linear-gradient(135deg, transparent 47%, rgba(255, 255, 255, .06) 50%, transparent 53%), #141616; }
.rseat__invite { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .2rem .1rem; font: inherit; color: #eef0ef; background: none; border: 0; cursor: pointer; }
.rseat__plus { position: relative; width: max(.9rem, 46px); height: max(.9rem, 46px); }
.rseat__plus::before, .rseat__plus::after { content: ''; position: absolute; background: #f2f4f3; box-shadow: 0 0 .1rem rgba(255, 255, 255, .5); }
.rseat__plus::before { left: 50%; top: 0; bottom: 0; width: 7px; transform: translateX(-50%); } .rseat__plus::after { top: 50%; left: 0; right: 0; height: 7px; transform: translateY(-50%); }
.rseat__invite b { font-size: max(calc(.26 * var(--t)), 15px); }
.rseat__invite small { font-size: max(calc(.15 * var(--t)), 10px); color: #8d9391; text-align: center; }
.rseat__invite:hover .rseat__plus::before, .rseat__invite:hover .rseat__plus::after { background: #5df0c6; }
.rseat__wait { display: flex; flex-direction: column; align-items: center; gap: .1rem; color: #b7bdbb; }
.rseat__wait svg { width: max(.7rem, 36px); height: auto; fill: none; stroke: currentColor; stroke-width: 3; }
.rseat__wait small { padding: .02rem .08rem; font-family: var(--font-display); font-size: max(calc(.1 * var(--t)), 7px); letter-spacing: .1em; background: rgba(255, 255, 255, .08); }
.rseat--empty.is-searching .rseat__wait { animation: mf-blip 1.6s ease-in-out infinite; }
.rseat__noinfo { position: absolute; right: .12rem; bottom: .3rem; font-family: var(--font-display); font-size: max(calc(.12 * var(--t)), 8px); letter-spacing: .1em; color: rgba(255, 255, 255, .15); }
.rs-brief { align-self: center; max-width: min(5rem, 46vw); }
/* 名片干员: one's own card opens the picker */
.rseat__art.is-pickable { cursor: pointer; }
.rseat__pick { position: absolute; right: .08rem; top: .5rem; z-index: 2; display: inline-flex; align-items: center; gap: .04rem; height: max(.36rem, 22px); padding: 0 .1rem;
  font: inherit; font-size: max(calc(.14 * var(--t)), 10px); font-weight: 700; color: #eef0ef; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  cursor: pointer; opacity: .75; transition: opacity var(--t-fast); }
.rseat__pick .icon { width: 1.1em; height: 1.1em; }
.rseat__art:hover .rseat__pick, .rseat__pick:focus-visible { opacity: 1; border-color: #5df0c6; }
@media (max-width: 900px) { .rseat__pick span { display: none; } }
.cardpick .modal__body, .cardpick { --cp-size: max(.86rem, 52px); }
.cardpick__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; margin-bottom: .12rem; }
.cardpick__search { flex: 1 1 2.4rem; display: flex; align-items: center; gap: .06rem; height: max(.5rem, 30px); padding: 0 .1rem; background: rgba(0, 0, 0, .4); border: 1px solid var(--line-2); }
.cardpick__search .icon { width: 1.1em; height: 1.1em; color: var(--text-lo); }
.cardpick__search input { flex: 1 1 auto; min-width: 0; font: inherit; color: var(--text-hi); background: none; border: 0; outline: none; }
.cardpick__stars { display: inline-flex; border: 1px solid var(--line-2); }
.cardpick__stars button { height: max(.48rem, 28px); padding: 0 .14rem; font: inherit; font-size: max(calc(.16 * var(--t)), 11px); color: var(--text-md); background: none; border: 0; cursor: pointer; }
.cardpick__stars button.is-on { color: #08221b; background: var(--mint-500); }
.cardpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cp-size), 1fr)); gap: .08rem; max-height: min(52vh, 5.4rem); overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.cardpick__op { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px; font: inherit; color: var(--text-md);
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); cursor: pointer; }
.cardpick__op:hover { border-color: var(--line-3); color: var(--text-hi); }
.cardpick__op.is-on { border-color: var(--mint-400); box-shadow: 0 0 0 1px var(--mint-400); color: var(--text-hi); }
.cardpick__img { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; background: linear-gradient(180deg, #d7dcda, #a9b1ae); }
.cardpick__img img { width: 100%; height: 100%; object-fit: cover; }
.cardpick__op--auto .cardpick__img { background: #1d2120; color: var(--mint-400); }
.cardpick__op--auto .cardpick__img .icon { width: 45%; height: 45%; }
.cardpick__name { width: 100%; font-size: max(calc(.13 * var(--t)), 10px); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cardpick__star { position: absolute; right: 3px; top: 3px; padding: 0 3px; font-size: max(calc(.11 * var(--t)), 8px); font-weight: 800; color: #111; background: #e8e8e8; }
.cardpick__star.r6 { background: #ffcf5a; } .cardpick__star.r5 { background: #f2e06b; }
/* the picked operator's looks (精二 / 精一 / skins; feedback #9 / #24, ui/opPicker.js LookBar) */
.cardpick__looks { display: flex; align-items: flex-end; gap: .08rem; margin-bottom: .12rem; padding: .06rem .08rem; overflow-x: auto; scrollbar-width: thin;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--line-2); }
.cardpick__looks-label { flex: none; align-self: center; font-size: max(calc(.14 * var(--t)), 11px); color: var(--text-lo); }
.cardpick__look { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: max(.72rem, 52px); padding: 3px; font: inherit;
  color: var(--text-md); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); cursor: pointer; }
.cardpick__look.is-on { border-color: var(--mint-400); box-shadow: 0 0 0 1px var(--mint-400); color: var(--text-hi); }
.cardpick__look.is-tall .cardpick__img { aspect-ratio: 3 / 4; }
.cardpick__look.is-tall .cardpick__img img { object-position: 50% 8%; }
.cardpick__note { display: flex; align-items: center; gap: .06rem; margin: .12rem 0 0; font-size: max(calc(.15 * var(--t)), 10px); color: var(--text-lo); }
.cardpick__note .icon { flex: none; width: 1.1em; height: 1.1em; }
/* 项目 5 (2026-10-16): the art of the picked operator — 精一 / 精二 / one of its own skins (room.card art/face). */
.cardpick__variants { display: flex; flex-wrap: wrap; align-items: center; gap: .06rem; margin: 0 0 .1rem; }
.cardpick__variant { height: max(.44rem, 26px); padding: 0 .12rem; font: inherit; font-size: max(calc(.15 * var(--t)), 10px); color: var(--text-md); background: rgba(0, 0, 0, .4); border: 1px solid var(--line-2); cursor: pointer; }
.cardpick__variant:hover { border-color: var(--line-3); color: var(--text-hi); }
.cardpick__variant.is-on { color: #08221b; background: var(--mint-500); border-color: var(--mint-400); }
.cardpick__foot { display: flex; justify-content: flex-end; margin-top: .12rem; }
.cardpick__ok { height: max(.5rem, 30px); padding: 0 .24rem; font: inherit; font-weight: 700; color: #08221b; background: var(--mint-500); border: 1px solid var(--mint-400); cursor: pointer; }
.cardpick__ok:hover { background: var(--mint-400); }

.rs-foot { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: .2rem; padding: .1rem .22rem .2rem; z-index: 2; }
.rs-foot__left { min-width: 0; }
.rs-top__right { display: flex; align-items: center; gap: .14rem; }
.rs-loadout.hub-plate { width: auto !important; height: max(.56rem, 34px) !important; min-width: 0; padding: 0 .2rem 0 .14rem !important; }
.rs-loadout.hub-plate .lo-entry__icon, .rs-loadout.hub-plate > .btn__icon { width: max(.36rem, 22px) !important; height: max(.36rem, 22px) !important; padding: .04rem; }
.rs-loadout.hub-plate .btn__label { font-size: max(calc(.18 * var(--t)), 12px); }
.rs-ready { display: inline-flex; align-items: center; gap: 2px; margin-right: .14rem; font-size: max(calc(.16 * var(--t)), 11px); color: #9aa19e; vertical-align: middle; }
.rs-ready .icon { width: max(.2rem, 13px); height: max(.2rem, 13px); color: #4b504e; }
.rs-ready .icon.is-on { color: #4fe8c0; }
.rs-ready b { margin-left: .06rem; color: #eef0ef; }
.rs-foot__center { display: flex; flex-direction: column; align-items: center; gap: .08rem; }
.rs-hint { margin: 0; font-size: max(calc(.18 * var(--t)), 12px); color: #d6dad8; text-align: center; }
.rs-hint .icon { width: 1.1em; height: 1.1em; margin-right: 4px; vertical-align: -2px; }
.rs-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .14rem; height: max(.68rem, 40px); padding: 0 .1rem;
  background: rgba(14, 15, 15, .92); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; box-shadow: 0 .04rem .16rem rgba(0, 0, 0, .5); }
.rs-pill__mode { display: inline-flex; align-items: center; gap: .08rem; font-size: max(calc(.2 * var(--t)), 13px); font-weight: 700; color: #e9eceb; white-space: nowrap; }
.rs-pill__mode .icon { width: 1.1em; height: 1.1em; }
.rs-pill__sep { width: 1px; height: 50%; background: rgba(255, 255, 255, .25); }
.rs-pill__diff { display: inline-flex; align-items: center; gap: .08rem; height: 78%; padding: 0 .2rem; font: inherit; font-size: max(calc(.2 * var(--t)), 13px); font-weight: 800;
  color: var(--d-color); background: #222525; background: color-mix(in srgb, var(--d-color) 22%, #151616); border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.rs-pill__diff .icon { width: 1.2em; height: 1.2em; }
.rs-pill__diff:disabled { cursor: default; }
.rs-pill__diff:hover:not(:disabled) { filter: brightness(1.2); }
.rs-foot__right { display: flex; align-items: center; justify-content: flex-end; gap: .14rem; }
.rs-search { display: inline-flex; align-items: center; gap: .08rem; height: max(.7rem, 40px); padding: 0 .26rem; font: inherit; font-size: max(calc(.24 * var(--t)), 14px); font-weight: 800;
  color: #5df0c6; background: rgba(10, 30, 25, .85); border: 2px solid rgba(79, 232, 192, .7); cursor: pointer; white-space: nowrap; }
.rs-search:hover:not(:disabled) { background: rgba(20, 60, 48, .9); }
.rs-search:disabled { opacity: .5; cursor: default; }
.rs-search .icon { width: 1.1em; height: 1.1em; }
.rs-go.proto-start { width: min(4.6rem, 40vw); }
.rs-go__box { display: grid; place-items: center; flex: none; width: max(.5rem, 28px); height: max(.5rem, 28px); border: 3px solid currentColor; border-radius: 6px; }
.rs-go__box .icon { width: 80%; height: 80%; }
.rs-go.is-ready { background: linear-gradient(180deg, #7ff3d4, #4fe0bf); }
.rs-searchpanel.mf-search { position: absolute; right: 0; top: 0; bottom: 0; z-index: 5; width: min(6.2rem, 46vw); padding-top: .9rem; padding-bottom: .3rem;
  background: linear-gradient(90deg, transparent, rgba(6, 7, 7, .9) 18%, rgba(6, 7, 7, .96)); animation: mf-found-in 240ms var(--ease-out) backwards; }
.rs > .mf-found { position: absolute; right: 0; top: 0; bottom: 0; z-index: 6; width: min(5.6rem, 44vw); }
.rs-proto { position: absolute; inset: 0; z-index: 7; display: grid; grid-template-columns: minmax(0, 1fr) min(5.6rem, 46vw); background: rgba(5, 6, 6, .6);
  animation: sw-in 160ms var(--ease-out) backwards; }
.rs-proto__scene { position: relative; opacity: .35; pointer-events: none; color: var(--d-color); }
.rs-proto__scene .ps { inset: 0; height: 100%; }
.rs-proto__side { min-height: 0; display: flex; flex-direction: column; gap: .12rem; padding: .2rem .3rem .2rem 0; background: linear-gradient(90deg, transparent, rgba(6, 7, 7, .9) 20%); }
.rs-proto__title { margin: 0; align-self: flex-end; font-size: max(calc(.34 * var(--t)), 18px); font-weight: 900; }
.rs-proto__list { flex: 1 1 auto; }
.rs-proto__ok.proto-start { flex: none; margin-left: .5rem; width: calc(100% - .5rem); }

@media (max-height: 520px) {
  .rs-top { padding-top: 6px; }
  .rs-seats { padding-top: 14px; gap: 12px; }
  .rseat__plate { min-height: 36px; margin-top: 4px; }
  .rseat__doc { display: none; }
  .rs-foot { padding-bottom: 8px; gap: 8px; }
  .rs-go.proto-start, .rs-proto__ok.proto-start { height: 46px; }
  .rs-go .proto-start__mark { display: none; }
  .rs-search { height: 40px; }
  .rs-loadout.hub-plate { min-width: 0; }
  .rs-loadout .btn__label { display: none; }
  .mf-search { gap: 4px; padding: 8px 10px; overflow-y: auto; }
  .mf-search__scene { width: min(100%, 200px); padding: 4px 16px; }
  .mf-search__tip { min-height: 0; }
  .mf-stop { margin-top: 4px; height: 32px; }
  .rs-searchpanel.mf-search { padding-top: 48px; }
  .mf-found__lines { max-height: 40%; }
}
.mf-brand { white-space: nowrap; }
@media (max-width: 900px) {
  .rs-foot { grid-template-columns: auto minmax(0, 1fr); }
  .rs-foot__center { grid-column: 1 / -1; grid-row: 1; }
  .rs-tools { display: none; }
  .rs-key__k { display: none; }
  /* phones: the tools row (its 好友 icon too) is hidden — 邀请好友 stays, a short label on a coarse-pointer-sized target */
  .rs-key__friends { min-width: 44px; justify-content: center; padding: 0 8px; }
}
@media (max-width: 640px) {
  .rs-key__friends span { display: none; }
}
@media (max-aspect-ratio: 1/1) {
  .ally-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, .7fr) auto; }
  .rs-seats { justify-content: flex-start; }
  .rseat { --w: max(1.8rem, 42vw); }
  .rs-searchpanel.mf-search, .rs > .mf-found { width: 100%; background: rgba(6, 7, 7, .94); }
  .rs-proto { grid-template-columns: minmax(0, 1fr); }
  .rs-proto__scene { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mf-scout *, .mf-scout__wave, .mf-radar__sweep, .mf-radar__blip, .mf-blk.is-lit, .mf-found__lines path, .rseat, .rseat__wait { animation: none !important; }
  .mf-found__lines path { stroke-dashoffset: 0; }
}

/* ==========================================================================================
   转场与动效 (2026-10-13, the owner's request: "游戏原版的转场", read frame by frame from the video 5:22–6:29):
   · a full-screen overlay (选择模拟协议 / 选择同盟方式 / S.W.E.E.P.报告) first darkens the hub to black (~150 ms), then its
     backdrop, top bar and panels come up one after another, sliding in from the right, a diamond marking the load at
     the bottom; leaving, its content fades and then the black lifts off the hub (js/ui/transitions.js useLeave);
   · a screen (the hub, the room) comes up from black the same way — the room's cards one by one, brightened at first;
   · 正在加入同盟…: a light runs along the bottom edge while the room is being opened;
   · in the room: 选择模拟协议 and ⚙ slide in and out, 搜寻中 fades in over the right with its lines one by one,
     搜寻成功 breaks in with green glitch bars before its lines draw down to the seats, a doctor turning 已就绪 flashes
     green with a beam from the card's clip, the empty seats dim while searching;
   · the 已选定 stamp's ring is drawn, the difficulty picture is redrawn for each difficulty.
   Reduced motion: theme.css cuts every animation to 1 ms; the delays are dropped below and the hooks do not wait.
   ========================================================================================== */
:root { --tr-ease: cubic-bezier(.16, .84, .3, 1); }
@keyframes tr-fade { from { opacity: 0; } }
@keyframes tr-out { to { opacity: 0; } }
@keyframes tr-veil { from { background-color: transparent; } }
@keyframes tr-lift { to { background-color: transparent; } }
@keyframes tr-right { from { opacity: 0; transform: translateX(.36rem); } }
@keyframes tr-left { from { opacity: 0; transform: translateX(-.36rem); } }
@keyframes tr-rise { from { opacity: 0; transform: translateY(.22rem); } }
@keyframes tr-zoom { from { opacity: 0; transform: scale(1.04); } }
@keyframes tr-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes tr-card { from { opacity: 0; transform: translateY(.16rem) scale(1.03); filter: brightness(1.9) saturate(.3); } 55% { filter: none; } }
@keyframes tr-diamond { 0% { opacity: 0; transform: translateX(-50%) rotate(45deg) scale(.5); } 30%, 72% { opacity: 1; transform: translateX(-50%) rotate(45deg) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) rotate(45deg) scale(1.1); } }
@keyframes tr-draw { to { stroke-dashoffset: 0; } }

/* ---- full-screen overlays over the hub ---- */
.sw { background-color: #080909; } /* the black it comes up from (the misty field is .sw__bg) */
.proto, .sw { animation: tr-veil 150ms linear backwards; }
.proto.is-chained { animation: none; }
.proto__bg, .sw__bg { animation: tr-fade 340ms ease-out 140ms backwards; }
.proto-top, .sw-top { animation: tr-fade 260ms ease-out 170ms backwards; }
.proto-title, .sw-tabs { animation: tr-right 400ms var(--tr-ease) 200ms backwards; }
.proto-stage, .ally-stage { animation: tr-zoom 480ms var(--tr-ease) 190ms backwards; }
.proto-list .pcard { animation: tr-right 400ms var(--tr-ease) backwards; animation-delay: calc(240ms + var(--n, 0) * 60ms); }
.proto-list .pcard:nth-child(2) { --n: 1; } .proto-list .pcard:nth-child(3) { --n: 2; } .proto-list .pcard:nth-child(4) { --n: 3; } .proto-list .pcard:nth-child(5) { --n: 4; }
.proto-foot { animation: tr-rise 400ms var(--tr-ease) 440ms backwards; }
.ally-card--create { animation: tr-right 420ms var(--tr-ease) 240ms backwards; }
.ally-links { animation: tr-right 420ms var(--tr-ease) 310ms backwards; }
.ally-card--join { animation: tr-right 420ms var(--tr-ease) 380ms backwards; }
.ally-guide { animation: tr-rise 380ms var(--tr-ease) 450ms backwards; }
.sw-left { animation: tr-left 440ms var(--tr-ease) 230ms backwards; }
.sw-right { animation: tr-right 440ms var(--tr-ease) 280ms backwards; }
.sw-right > * { animation: tr-fade 260ms ease-out backwards; } /* a tab's tiles come up when it is opened */
/* the diamond at the bottom while it loads */
.proto::after, .sw::after { content: ''; position: absolute; left: 50%; bottom: max(.5rem, 24px); z-index: 9; width: max(.3rem, 16px); height: max(.3rem, 16px);
  border: 2px solid rgba(223, 230, 226, .55); box-shadow: inset 0 0 0 3px #0a0b0b, inset 0 0 0 5px rgba(223, 230, 226, .3); pointer-events: none; opacity: 0;
  animation: tr-diamond 720ms ease-out 60ms both; }
.proto.is-chained::after { animation-delay: 0ms; }
/* leaving: the content fades, then the black lifts off the hub (LEAVE_MS 300 = 130 + 170) */
.proto.is-leaving, .sw.is-leaving { pointer-events: none; animation: tr-lift 170ms linear 130ms forwards; }
.proto.is-leaving > *, .sw.is-leaving > * { animation: tr-out 140ms ease-in forwards; }
.proto.is-leaving::after, .sw.is-leaving::after { display: none; }

/* 正在加入同盟… */
.tr-join { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; align-items: center; gap: .1rem; padding: 0 max(.24rem, 12px) max(.05rem, 3px);
  font-size: max(calc(.19 * var(--t)), 12px); font-weight: 700; letter-spacing: .04em; color: #5df0c6; text-shadow: 0 0 .12rem rgba(93, 240, 198, .45); pointer-events: none;
  animation: tr-fade 200ms ease-out backwards; }
.tr-join::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: left;
  background: linear-gradient(90deg, rgba(93, 240, 198, .2), #5df0c6 40%, #c9fff0 50%, #5df0c6 60%, rgba(93, 240, 198, .2)); box-shadow: 0 0 10px #5df0c6;
  animation: tr-run 1.4s var(--tr-ease) both; }
@keyframes tr-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tr-join__mark { width: max(.24rem, 14px); height: max(.24rem, 14px); flex: none; border: 2px solid currentColor; border-radius: 3px;
  background: linear-gradient(currentColor, currentColor) center / 40% 40% no-repeat; animation: spin 1.4s steps(8) infinite; }
.tr-join__dots { display: inline-block; width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; animation: tr-dots 1.2s steps(4, jump-none) infinite; }
.tr-join__dots::before { content: '...'; }
@keyframes tr-dots { to { width: 1.1em; } }

/* the stamp's ring is drawn; the difficulty picture comes up again for each difficulty */
.pcard.is-on .pcard__ring path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tr-draw 380ms ease-out 90ms forwards; }
.pcard.is-on .pcard__ring path + path { animation-delay: 260ms; }
.ps { animation: tr-fade 320ms ease-out backwards; }

/* ---- the hub comes up from black ---- */
.lobby-hub .hub-bg { animation: tr-fade 560ms ease-out backwards; }
.lobby-hub > .topbar { animation: tr-fade 320ms ease-out 120ms backwards; } /* opacity only: its dialogs are fixed */
.hub-center { animation: tr-zoom 600ms var(--tr-ease) 140ms backwards; }
.hub-side { animation: tr-left 480ms var(--tr-ease) 220ms backwards; }
.hub-right { animation: tr-right 480ms var(--tr-ease) 260ms backwards; }
.hub-entries .hub-entry-wrap { animation: tr-rise 440ms var(--tr-ease) 300ms backwards; }
.hub-entries .hub-entry-wrap:nth-child(2) { animation-delay: 360ms; }
.hub-entries .hub-entry-wrap:nth-child(3) { animation-delay: 420ms; }
.hub-entries .hub-entry-wrap:nth-child(4) { animation-delay: 480ms; }

/* ---- the room comes up from black, card by card ---- */
.rs__bg { animation: tr-fade 440ms ease-out backwards; }
.rs-top { animation: tr-fade 320ms ease-out 120ms backwards; }
.rseat { animation: tr-card 480ms var(--tr-ease) backwards; animation-delay: calc(150ms + var(--i, 0) * 70ms); }
.rs--big .rseat { animation-delay: calc(150ms + var(--i, 0) * 35ms); }
.rs-brief { animation: tr-right 440ms var(--tr-ease) 260ms backwards; }
.rs-foot { animation: tr-rise 420ms var(--tr-ease) 300ms backwards; }
.rs-foot__right { animation: tr-right 440ms var(--tr-ease) 380ms backwards; }
.rs.is-leaving { pointer-events: none; }
.rs.is-leaving > * { animation: tr-out 200ms ease-in forwards; }
/* searching: the empty seats step back */
.rseat--empty { transition: opacity 320ms ease; }
.rseat--empty.is-searching { opacity: .5; }

/* 已就绪: a green flash over the portrait, a beam from the clip, the state pops */
.rseat.is-flash .rseat__art { animation: tr-glow 700ms ease-out; }
@keyframes tr-glow { 20% { box-shadow: 0 0 .5rem rgba(120, 255, 215, .9), 0 0 .12rem #b9ffe9; border-color: #b9ffe9; } }
.rseat.is-flash .rseat__art::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(214, 255, 243, .95), rgba(79, 232, 192, .7)); animation: tr-wash 700ms ease-out forwards; }
@keyframes tr-wash { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }
.rseat.is-flash .rseat__clip::after { content: ''; position: absolute; left: 50%; bottom: 100%; width: 6px; height: .16rem; transform-origin: 50% 100%;
  background: linear-gradient(0deg, #c9fff0, rgba(93, 240, 198, 0)); box-shadow: 0 0 8px #5df0c6; animation: tr-beam 700ms ease-out forwards; }
@keyframes tr-beam { 0% { opacity: 0; transform: translateX(-50%) scaleY(0); } 22% { opacity: 1; transform: translateX(-50%) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1.3); } }
.rseat.is-flash .rseat__state { animation: tr-pop 380ms cubic-bezier(.3, 1.7, .5, 1) 100ms backwards; }

/* 选择模拟协议 over the room; ⚙ */
.rs-proto { animation: tr-veil 160ms linear backwards; }
.rs-proto__scene { animation: tr-fade 360ms ease-out 100ms backwards; }
.rs-proto__side { animation: tr-right 380ms var(--tr-ease) 60ms backwards; }
.rs-proto .proto-list .pcard { animation-delay: calc(110ms + var(--n, 0) * 50ms); }
.rs-proto.is-leaving { pointer-events: none; animation: tr-lift 200ms linear forwards; }
.rs-proto.is-leaving > * { animation: tr-slide-out 200ms ease-in forwards; }
@keyframes tr-slide-out { to { opacity: 0; transform: translateX(.36rem); } }
@keyframes tr-pop-up { from { opacity: 0; transform: translateX(-50%) translateY(.12rem) scale(.96); } }
@keyframes tr-pop-down { to { opacity: 0; transform: translateX(-50%) translateY(.08rem) scale(.97); } }

/* 搜寻中: the panel fades in over the right, its lines one after another */
.rs-searchpanel.mf-search { animation: tr-fade 260ms ease-out backwards; }
.mf-search > * { animation: tr-right 400ms var(--tr-ease) backwards; animation-delay: 60ms; }
.mf-search > :nth-child(2) { animation-delay: 110ms; }
.mf-search > :nth-child(3) { animation-delay: 160ms; }
.mf-search > :nth-child(4) { animation-delay: 210ms; }
.mf-search > :nth-child(5) { animation-delay: 260ms; }
.mf-search > :nth-child(6) { animation-delay: 300ms; }
.mf-search > :nth-child(7) { animation-delay: 340ms; }
.mf-search.is-leaving { pointer-events: none; animation: tr-out 200ms ease-in forwards; }

/* 搜寻成功: green glitch bars, the panel wiped in bright, then the lines, the face, the words */
.mf-found { position: relative; isolation: isolate; overflow: hidden;
  animation: tr-found 380ms var(--tr-ease) backwards, tr-found-glow 1.8s ease-in-out 700ms infinite alternate; }
@keyframes tr-found { 0% { clip-path: inset(0 0 0 100%); filter: brightness(2.4) saturate(.6); } 55% { clip-path: inset(0); filter: brightness(1.7); }
  100% { clip-path: inset(0); filter: none; } }
@keyframes tr-found-glow { from { box-shadow: inset 0 -.2rem .5rem -.2rem rgba(150, 255, 222, .2); } to { box-shadow: inset 0 -.5rem .9rem -.2rem rgba(150, 255, 222, .6); } }
.mf-found::before, .mf-found::after { content: ''; position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(225, 255, 246, .5) 0 1px, transparent 1px 3px), linear-gradient(90deg, #2fd6a6, #7bffd8 40%, #2fd6a6); }
.mf-found::before { top: 6%; height: 38%; animation: tr-glitch-a 560ms steps(1, end) backwards; }
.mf-found::after { top: 52%; height: 30%; animation: tr-glitch-b 560ms steps(1, end) backwards; }
@keyframes tr-glitch-a { 0% { opacity: 1; transform: translateX(30%); } 14% { opacity: 1; transform: translateX(-8%) scaleY(1.2); } 28% { opacity: .85; transform: translateX(12%) scaleY(.5); }
  42% { opacity: .6; transform: translateX(-4%); } 56% { opacity: .9; transform: scaleY(.2); } 70%, 100% { opacity: 0; transform: none; } }
@keyframes tr-glitch-b { 0% { opacity: 0; } 10% { opacity: .95; transform: translateX(-24%); } 24% { opacity: .95; transform: translateX(10%) scaleY(.6); }
  38% { opacity: .7; transform: translateX(-6%) scaleY(1.3); } 52% { opacity: .4; transform: none; } 64%, 100% { opacity: 0; transform: none; } }
.mf-found > .mf-brand { animation: tr-fade 260ms ease-out 260ms backwards; }
.mf-found__lines { animation: tr-fade 200ms ease-out 240ms backwards; }
.mf-found__lines path { animation-delay: calc(260ms + var(--k) * 40ms); }
.mf-found__face { animation: tr-pop 460ms cubic-bezier(.3, 1.7, .5, 1) 420ms backwards; }
.mf-found__title { animation: tr-rise 320ms var(--tr-ease) 520ms backwards; }
.mf-found__sub { animation: tr-fade 300ms ease-out 620ms backwards; }
.mf-found.is-leaving { animation: tr-out 320ms ease-in forwards; }

@media (prefers-reduced-motion: reduce) {
  .proto, .sw, .proto *, .sw *, .proto::after, .sw::after, .lobby-hub *, .rs *, .rs__bg, .mf-found, .mf-found::before, .mf-found::after { animation-delay: 0ms !important; }
  .proto::after, .sw::after, .mf-found::before, .mf-found::after, .tr-join::after { display: none; }
}

/* ==========================================================================================
   成就统计 (js/ui/achievements.js; the event video 1:25–1:44): the hub's top-left entry card and the
   卫戍协议：盟约 panel. Sizes are the video's 1920-wide pixels / 100.
   ========================================================================================== */
.hub-ach { position: relative; width: 100%; display: flex; flex-direction: column; margin-bottom: .1rem; padding: 0; cursor: pointer; text-align: left; color: #eef3f1;
  background: #0c1110; border: 1px solid rgba(220, 230, 226, .16); box-shadow: 0 .04rem .16rem rgba(0, 0, 0, .45); transition: border-color var(--t-fast, 150ms), filter var(--t-fast, 150ms); }
.hub-ach:hover, .hub-ach:focus-visible { border-color: var(--mint-a35, rgba(78, 216, 175, .35)); filter: brightness(1.08); outline: none; }
.hub-ach:focus-visible { box-shadow: 0 0 0 2px var(--mint-400); }
.hub-ach__scene { position: relative; height: .88rem; overflow: hidden; display: grid; place-items: center; }
.hub-ach__land { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub-ach__scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px), linear-gradient(90deg, rgba(8, 10, 10, .55), transparent 40%); }
.hub-ach .hub-ach__mark { position: relative; z-index: 1; display: grid; place-items: center; }
.hub-ach .hub-ach__mark .emblem { margin: 0; gap: .06rem; animation: none; }
.hub-ach .hub-ach__mark .emblem__svg { width: .52rem; height: .56rem; filter: drop-shadow(0 0 .04rem rgba(0, 0, 0, .6)); }
.hub-ach .hub-ach__mark .emblem__svg circle { fill: #15110c; animation: none; }
.hub-ach .hub-ach__mark .emblem__svg circle.is-accent { fill: #2cf0b8; }
.hub-ach .hub-ach__mark .emblem__bracket { height: .66rem; width: .07rem; border-width: 1px; border-color: rgba(20, 16, 10, .55); }
.hub-ach__rank { position: absolute; left: .1rem; top: .1rem; z-index: 1; width: .52rem; display: flex; flex-direction: column; align-items: center; gap: .01rem; padding: .04rem 0 .03rem;
  background: rgba(14, 18, 17, .55); border: 1px solid rgba(240, 244, 243, .4); }
.hub-ach__rank > .icon { width: .3rem; height: .3rem; color: #eef3f1; }
.hub-ach__rank small { display: inline-flex; align-items: center; gap: .02rem; font-size: .13rem; color: #e6ebe9; }
.hub-ach__rank small .icon { width: .12rem; height: .12rem; }
.hub-ach__label { position: relative; display: flex; align-items: center; gap: .08rem; height: .42rem; padding: 0 .14rem; background: linear-gradient(90deg, rgba(20, 26, 25, .96), rgba(14, 18, 17, .96));
  border-top: 1px solid rgba(220, 230, 226, .14); font-size: .21rem; font-weight: 700; white-space: nowrap; }
.hub-ach__label::before, .hub-ach__label::after { content: ''; position: absolute; top: .06rem; bottom: .06rem; width: .06rem; border: 1px solid rgba(220, 230, 226, .3); }
.hub-ach__label::before { left: .04rem; border-right: 0; }
.hub-ach__label::after { right: .04rem; border-left: 0; }
.hub-ach__badge { width: .24rem; height: .24rem; fill: #e8eeec; flex: none; }
.hub-ach__lv { margin-left: auto; font-size: .15rem; color: var(--mint-400); font-weight: 600; }
/* a guest: the achievements are the account's (2026-10-14) */
.hub-ach__login { color: #b9c2bf; }
.hub-ach.is-guest .hub-ach__scene { filter: saturate(.55) brightness(.8); }

/* ---- the panel ---- */
/* the reference clip's order: the lobby blurs at once, a diamond loader while the data comes, then the panel fades in */
.ach { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: rgba(2, 4, 4, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: ach-fade 140ms both; }
.ach.is-closing { animation: ach-fade 180ms reverse forwards; }
@keyframes ach-fade { from { opacity: 0; } }
.ach__loader { position: absolute; left: 50%; bottom: 9%; width: .9rem; height: .9rem; margin-left: -.45rem; display: grid; place-items: center; pointer-events: none; }
.ach__loader i, .ach__loader b { grid-area: 1 / 1; transform: rotate(45deg); }
.ach__loader i { width: .56rem; height: .56rem; border: 2px solid rgba(240, 244, 243, .9); animation: ach-dia 1.1s var(--ease-out) infinite; }
.ach__loader i + i { animation-delay: .55s; }
.ach__loader b { width: .24rem; height: .24rem; border: 2px solid #f4f7f6; animation: ach-dia-core 1.1s linear infinite; }
@keyframes ach-dia { from { transform: rotate(45deg) scale(.55); opacity: 1; } to { transform: rotate(45deg) scale(1.4); opacity: 0; } }
@keyframes ach-dia-core { to { transform: rotate(225deg); } }
.ach__box { position: relative; width: min(17.4rem, calc(100vw - 1.1rem)); height: min(9.06rem, calc(var(--sp-vh, 1vh) * 100 - .9rem)); display: flex; flex-direction: column;
  background: radial-gradient(60% 70% at 70% 60%, rgba(30, 70, 62, .3), transparent 70%), #0a0d0d; box-shadow: 0 0 0 1px rgba(220, 230, 226, .1), 0 .2rem .6rem rgba(0, 0, 0, .7);
  animation: ach-in 240ms var(--ease-out) both;
 }
@keyframes ach-in { from { opacity: 0; transform: scale(.985); } }
.ach__box::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 4px); }
.ach__head { position: relative; flex: none; height: 1.27rem; display: flex; align-items: stretch; overflow: hidden;
  background: linear-gradient(180deg, #1b1f1e, #141716); border-bottom: 1px solid rgba(220, 230, 226, .08); }
.ach__head::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4.6rem; opacity: .35; pointer-events: none;
  background: linear-gradient(160deg, transparent 40%, rgba(150, 160, 158, .35) 41% 46%, transparent 47%), linear-gradient(200deg, transparent 50%, rgba(150, 160, 158, .3) 51% 55%, transparent 56%); }
.ach__logo { position: relative; display: flex; align-items: center; gap: .1rem; padding-left: .45rem; color: #a7b0ad; }
.ach__logo svg { width: .5rem; height: .38rem; }
.ach__logo b { font-family: var(--font-display); font-size: .17rem; line-height: .95; font-weight: 600; }
.ach__band { position: relative; margin-left: auto; width: 8.7rem; display: flex; align-items: center; gap: .3rem; padding-left: 2.2rem;
  background: linear-gradient(90deg, transparent, rgba(220, 128, 36, .82) 24%, #f0a23a 60%, #f3b04a); }
.ach__band::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(100deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 9px); }
.ach__dunes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ach__dunes path { fill: rgba(150, 64, 8, .3); }
.ach__dunes path.is-far { fill: rgba(255, 220, 150, .2); }
.ach__band .emblem { margin: 0; gap: .06rem; animation: none; }
.ach__band .emblem__svg { width: .7rem; height: .76rem; }
.ach__band .emblem__svg circle { fill: #15110c; animation: none; }
.ach__band .emblem__svg circle.is-accent { fill: #15110c; filter: none; }
.ach__band .emblem__bracket { height: .95rem; width: .1rem; border-width: 2px; border-color: rgba(20, 16, 10, .7); }
.ach__titles { position: relative; display: flex; flex-direction: column; line-height: 1.05; }
.ach__titles i { font-family: var(--font-display); font-style: normal; font-size: .3rem; letter-spacing: .06em; color: transparent; -webkit-text-stroke: 1px rgba(30, 22, 12, .6); }
.ach__titles b { font-size: .38rem; font-weight: 900; color: #16110a; white-space: nowrap; }
.ach__body { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .1rem .7rem .5rem .66rem; scrollbar-width: thin; scrollbar-color: rgba(220, 230, 226, .45) transparent; }
.ach__body::-webkit-scrollbar { width: .07rem; }
.ach__body::-webkit-scrollbar-thumb { background: rgba(220, 230, 226, .45); border-radius: .04rem; }
.ach__close { position: absolute; right: -.52rem; top: -.36rem; z-index: 2; width: .5rem; height: .5rem; display: grid; place-items: center; padding: 0; border: 0; background: none; color: #f4f7f6; cursor: pointer; }
.ach__close .icon { width: .5rem; height: .5rem; filter: drop-shadow(0 0 .04rem #000); }
.ach__close:hover, .ach__close:focus-visible { color: var(--mint-400); outline: none; }
.ach__foot { position: absolute; right: -.06rem; bottom: -.16rem; z-index: 2; padding: .06rem .16rem; font-size: .2rem; color: #e2e8e6; background: rgba(16, 22, 21, .94);
  box-shadow: inset 0 0 0 1px rgba(78, 216, 175, .35); }
@media (max-width: 1100px) { .ach__close { right: .06rem; top: .06rem; } }

/* the top area: plate + mode table | the 评语 hexagon */
.ach-top-area { display: grid; grid-template-columns: minmax(0, 9.1rem) minmax(0, 1fr); gap: .3rem; padding-top: .3rem; }
.ach-plate { display: flex; gap: .24rem; align-items: flex-start; }
.ach-card { position: relative; width: 6.15rem; height: auto; aspect-ratio: var(--nc-ar, 4 / 1); flex: none; display: flex; align-items: center; gap: .14rem; padding: .1rem .16rem; overflow: hidden; border-radius: .06rem;
  background: linear-gradient(118deg, #e23443 0 46%, #2b2e33 46% 50%, #f2f4f3 50% 56%, #2fb6c6 56%); }
.ach-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 60%); pointer-events: none; }
.ach-card__ava { position: relative; z-index: 1; width: 1.2rem; height: 1.2rem; flex: none; display: grid; place-items: center; background: #1d2423; border: 2px solid #f4f7f6; }
.ach-card__ava img { width: 100%; height: 100%; object-fit: cover; }
button.ach-card__ava { padding: 0; font: inherit; color: inherit; cursor: pointer; }
button.ach-card__ava:hover, button.ach-card__ava:focus-visible { border-color: var(--mint-400); }
.ach-card__glyph { font-size: .6rem; font-weight: 900; color: #4af2c4; }
.ach-card__lv { position: absolute; left: -.12rem; top: -.1rem; width: .4rem; height: .4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: .9;
  border-radius: 50%; background: #111; border: 3px solid #ffd21e; color: #fff; }
.ach-card__lv b { font-family: var(--font-display); font-size: .17rem; }
.ach-card__lv small { font-size: .08rem; }
.ach-card__who { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; align-self: flex-start; padding-top: .04rem; }
.ach-card__name { font-size: .24rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 .02rem .04rem rgba(0, 0, 0, .5); }
.ach-card__tag { margin-left: .02rem; color: rgba(255, 255, 255, .8); font-weight: 400; }
.ach-card__brand { position: absolute; right: .14rem; bottom: .08rem; z-index: 1; font-family: var(--font-display); font-size: .12rem; line-height: .95; font-weight: 600; color: rgba(255, 255, 255, .85); text-align: right; }
/* 已获奖杯 / 获赞数, each with its badge */
.ach-counts { display: grid; grid-template-columns: auto auto; column-gap: .12rem; row-gap: .14rem; align-items: center; padding-top: .06rem; }
.ach-counts__badge { width: .64rem; height: .64rem; display: grid; place-items: center; }
.ach-counts__badge svg { width: 100%; height: 100%; }
.ach-counts__badge.is-trophy .tbadge { width: 100%; height: 100%; }
.ach-counts__badge.is-like rect { fill: #e8823a; stroke: #ffe2c6; stroke-width: 2; }
.ach-counts__ink { fill: #2a1606; }
.ach-counts__row { display: flex; flex-direction: column; line-height: 1.1; }
.ach-counts__row small { display: inline-flex; align-items: center; gap: .04rem; font-size: .22rem; color: #b9c2bf; white-space: nowrap; }
.ach-counts__row small .icon { width: .18rem; height: .18rem; }
.ach-counts__row b { font-family: var(--font-display); font-size: .3rem; color: #f4f7f6; }
.ach-modes { margin-top: .3rem; background: rgba(22, 32, 30, .55); }
.ach-modes__row { display: grid; grid-template-columns: 1.75rem repeat(3, minmax(0, 1fr)); align-items: center; height: 1.8rem; }
.ach-modes__row + .ach-modes__row .ach-modes__cell { border-top: 1px solid rgba(220, 230, 226, .1); }
.ach-modes__mode { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .06rem; background: rgba(28, 92, 80, .42); color: #4af2c4; }
.ach-modes__mode .icon { width: .24rem; height: .24rem; }
.ach-modes__mode b { font-size: .28rem; white-space: nowrap; }
.ach-modes__cell { height: 1.2rem; display: flex; flex-direction: column; justify-content: center; padding-left: .3rem; }
.ach-modes__cell b { font-family: var(--font-display); font-size: .42rem; line-height: 1.05; color: #4af2c4; font-weight: 500; }
.ach-modes__cell small { font-size: .25rem; color: #a9b3b0; white-space: nowrap; }
.ach-hex { position: relative; min-height: 4.4rem; }
/* the reference's hexagon: six solid mint triangles, dark gaps, a ruler inside each outer edge, a dark hub, a soft glow */
.ach-hex__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 .14rem rgba(74, 242, 196, .3)); }
.ach-hex__seg polygon { fill: #5cd3b2; stroke: rgba(225, 255, 246, .32); stroke-width: 1.5; stroke-linejoin: round; }
.ach-hex__ticks line { stroke: rgba(8, 48, 38, .34); stroke-width: 2; }
.ach-hex__hub { fill: #0b100f; stroke: rgba(8, 48, 38, .7); stroke-width: 5; }
.ach-hex__seg { animation: ach-seg 380ms var(--ease-out) calc(60ms + var(--i) * 50ms) both; transform-origin: 0 0; }
@keyframes ach-seg { from { opacity: 0; transform: scale(.72); } }
.ach-hex__cap { position: absolute; left: .1rem; top: 0; display: grid; grid-template-columns: auto auto; column-gap: .08rem; align-items: center; font-family: var(--font-display);
  font-size: .16rem; letter-spacing: .04em; color: rgba(220, 230, 226, .3); white-space: nowrap; pointer-events: none; }
.ach-hex__cap i { width: .06rem; height: .06rem; background: var(--mint-400); }
.ach-hex__cap small { grid-column: 2; width: .5rem; height: .08rem; margin-top: .04rem; background: rgba(74, 242, 196, .4); }
.ach-hex__label { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; line-height: 1.15; white-space: nowrap; isolation: isolate;
  animation: ach-pop 320ms var(--ease-out) calc(180ms + var(--i) * 50ms) both; }
.ach-hex__label b { position: relative; padding: 0 .1rem; font-family: var(--font-display); font-size: .32rem; color: #dafff4; font-weight: 600; text-shadow: 0 0 .08rem rgba(74, 242, 196, .9); }
.ach-hex__label b::before { content: ''; position: absolute; z-index: -1; inset: 18% -4%; border-radius: .2rem; background: rgba(74, 242, 196, .26); filter: blur(.05rem); }
.ach-hex__label span { font-size: .25rem; color: #dfe6e3; }

/* section bars */
.ach-bar { position: relative; display: flex; align-items: center; gap: .2rem; height: .66rem; margin: .5rem 0 .3rem; padding: 0 .3rem 0 1.38rem;
  background: linear-gradient(90deg, rgba(150, 160, 158, .34), rgba(110, 120, 118, .2) 70%, rgba(110, 120, 118, .1)); }
.ach-bar::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .4; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 7px); }
.ach-bar__icon { position: absolute; left: .3rem; top: -.2rem; width: .9rem; height: 1.04rem; display: grid; place-items: center; background: #2b302f; box-shadow: 0 0 0 2px rgba(200, 210, 206, .32); }
.ach-bar__icon svg { width: .52rem; height: .52rem; fill: #eef3f1; }
.ach-bar__title { position: relative; z-index: 1; font-size: .34rem; font-weight: 800; color: #f2f6f5; letter-spacing: .04em; }
.ach-bar__marks { position: relative; z-index: 1; margin-left: auto; display: flex; align-items: center; gap: .06rem; color: rgba(220, 230, 226, .55); }
.ach-bar__marks > i { width: .3rem; height: .3rem; display: grid; place-items: center; border: 1px solid rgba(220, 230, 226, .45); }
.ach-bar__marks > i .icon, .ach-bar__marks > i svg { width: .2rem; height: .2rem; }
.ach-bar__micro { margin-left: .04rem; line-height: 1.1; color: rgba(220, 230, 226, .5); }

/* 卫戍成就 */
.ach-best { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .5rem; align-items: center; }
.ach-best__left { display: flex; flex-direction: column; align-items: center; gap: .12rem; }
/* the emblem in its brackets, wired to the lineup's bracket (a dot, the wire, three ticks) */
.ach-best__mount { position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: .12rem; padding: .06rem .3rem .1rem; }
.ach-best__mount::before, .ach-best__mount::after { content: ''; position: absolute; top: 0; bottom: .1rem; width: .1rem; border: 2px solid rgba(200, 210, 206, .3); pointer-events: none; }
.ach-best__mount::before { left: 0; border-right: 0; }
.ach-best__mount::after { right: 0; border-left: 0; }
.ach-best__wire { position: absolute; left: 100%; top: 1.21rem; width: .5rem; height: 2px; background: rgba(200, 210, 206, .4); }
.ach-best__wire::before { content: ''; position: absolute; left: -.05rem; top: 50%; width: .1rem; height: .1rem; margin-top: -.05rem; border-radius: 50%; background: rgba(200, 210, 206, .6); }
.ach-best__wire::after { content: ''; position: absolute; right: 0; top: -.14rem; width: .14rem; height: .3rem; background: repeating-linear-gradient(180deg, rgba(200, 210, 206, .45) 0 2px, transparent 2px .14rem); }
.ach-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: .06rem; padding: .04rem .16rem; border-radius: .24rem; background: rgba(220, 230, 226, .14); font-size: .26rem; font-weight: 600; }
.ach-pill .icon { width: .2rem; height: .2rem; }
.ach-best__glyph { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; margin-top: .1rem; background: #121716;
  box-shadow: 0 0 0 3px rgba(200, 210, 206, .32), 0 0 0 .1rem #0b0f0e, 0 0 0 calc(.1rem + 1px) rgba(200, 210, 206, .16); }
.ach-best__glyph .bglyph, .ach-top__frame .bglyph { width: 1.3rem; height: 1.3rem; display: grid; place-items: center; }
.ach-best__glyph .bglyph img, .ach-top__frame .bglyph img { width: 100%; height: 100%; object-fit: contain;
  filter: brightness(0) invert(84%) sepia(52%) saturate(640%) hue-rotate(106deg) drop-shadow(0 0 .1rem rgba(74, 242, 196, .6)); }
.ach-best__glyph .bglyph__txt, .ach-top__frame .bglyph__txt { font-size: .8rem; font-weight: 900; color: #4af2c4; }
.ach-best__label { font-size: .27rem; color: #dfe6e3; }
.ach-best__num { font-family: var(--font-display); font-size: .66rem; line-height: 1; color: #4af2c4; font-weight: 500; }
.ach-best__lineup { position: relative; display: flex; gap: .4rem; padding: .3rem .4rem .3rem .5rem; }
.ach-best__lineup::before, .ach-best__lineup::after { content: ''; position: absolute; top: 0; bottom: 0; width: .1rem; border: 2px solid rgba(200, 210, 206, .35); pointer-events: none; }
.ach-best__lineup::before { left: 0; border-right: 0; }
.ach-best__lineup::after { right: 0; border-left: 0; }
.ach-best__rows { display: flex; flex-direction: column; gap: .26rem; }
.ach-best__row { display: flex; gap: .38rem; }
.ach-best__bonds { display: grid; grid-template-columns: repeat(2, auto); gap: .14rem .3rem; align-content: start; padding-left: .1rem; }
.ach-maxima { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; margin-top: .4rem; }
.ach-max { position: relative; height: 1.5rem; display: flex; flex-direction: column; justify-content: center; padding: 0 .3rem; overflow: hidden; }
.ach-max::before, .ach-max::after { content: ''; position: absolute; top: 0; bottom: 0; width: .1rem; border: 2px solid rgba(200, 210, 206, .32); pointer-events: none; }
.ach-max::before { left: 0; border-right: 0; }
.ach-max::after { right: 0; border-left: 0; }
.ach-max__label { position: relative; z-index: 1; font-size: .25rem; color: #d4dcd9; white-space: nowrap; }
.ach-max__num { position: relative; z-index: 1; display: flex; align-items: baseline; gap: .02rem; line-height: 1.05; }
.ach-max__num small { font-size: .36rem; color: #f4f7f6; }
.ach-max__num .num { font-family: var(--font-display); font-size: .54rem; font-weight: 500; color: var(--mx, #4af2c4); }
.ach-max__glyph { position: absolute; right: .36rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; fill: var(--mx, #4af2c4); opacity: .45; }
.ach-max.is-gold { --mx: #ffcf1f; } .ach-max.is-orange { --mx: #ff8a2a; } .ach-max.is-mint { --mx: #3fe3b2; }

/* 盟约纪录 / 策略纪录 */
.ach-list { padding-bottom: .1rem; }
.ach-sub { margin: .26rem 0 .2rem .4rem; font-size: .26rem; color: #b9c2bf; }
.ach-sub::before { content: '-'; margin-right: .22rem; }
.ach-empty { margin: .1rem 0 .1rem .8rem; font-size: .22rem; color: #7d8784; }
.ach-tops { display: flex; gap: 1.45rem; padding-left: 2.1rem; }
.ach-top { display: flex; flex-direction: column; align-items: center; gap: .16rem; animation: ach-pop 380ms var(--ease-out) both; }
@keyframes ach-pop { from { opacity: 0; transform: translateY(.12rem); } }
.ach-top__frame { position: relative; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; background: rgba(12, 18, 17, .7); box-shadow: inset 0 0 0 3px rgba(200, 210, 206, .3); }
.ach-top__rank { position: absolute; left: .12rem; top: .08rem; font-family: var(--font-display); font-style: normal; font-size: .22rem; color: rgba(220, 230, 226, .5); }
.ach-top__name { font-size: .28rem; font-weight: 700; color: #eef3f1; white-space: nowrap; }
.ach-tops--band { gap: .9rem; padding-left: .9rem; }
.ach-top--band { flex-direction: row; align-items: center; gap: .22rem; }
.ach-top--band .ach-top__frame { width: 2.1rem; height: 2.1rem; }
.ach-top--band .bandicon, .ach-mark__frame .bandicon { width: 1.6rem; height: 1.6rem; }
.ach-top--band .bandicon img, .ach-mark__frame .bandicon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 .08rem rgba(74, 242, 196, .45)); }
.ach-top__side { display: flex; flex-direction: column; gap: .06rem; }
.ach-top__count { display: flex; align-items: baseline; gap: .02rem; }
.ach-top__count small { font-size: .28rem; color: #eef3f1; }
.ach-top__count b { font-family: var(--font-display); font-size: .44rem; line-height: 1; color: #4af2c4; font-weight: 500; }
.ach-ops { display: flex; flex-wrap: wrap; gap: .26rem .5rem; padding-left: .95rem; }
.ach-op { position: relative; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; }
.ach-op .uthumb { --ut: 1.36rem; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(20, 26, 25, .9), 0 0 .2rem rgba(74, 242, 196, .22); }
.ach-op__tier { position: absolute; left: .02rem; bottom: -.02rem; min-width: .4rem; height: .36rem; padding: 0 .04rem; display: grid; place-items: center; font-family: var(--font-display); font-size: .2rem;
  font-weight: 700; line-height: 1; color: var(--tc, #e6eae8); background: #151818; border: 2px solid var(--tc, #e6eae8); border-radius: .05rem; }
.ach-op.sop--t5 .ach-op__tier { background: #151818; color: #ffc81e; border-color: #ffc81e; }
.ach-op.sop--t6 .ach-op__tier { background: #151818; color: #ff8a1d; border-color: #ff8a1d; }
.ach-marks { display: flex; flex-wrap: wrap; gap: .4rem; padding-left: 1.2rem; }
.ach-mark { display: flex; flex-direction: column; align-items: center; gap: .12rem; }
.ach-mark b { font-size: .28rem; font-weight: 700; }
.ach-mark__frame { position: relative; width: 2rem; height: 2rem; display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, rgba(74, 242, 196, .08) 0 .04rem, transparent .04rem .12rem), rgba(18, 40, 36, .7); box-shadow: inset 0 0 0 1px rgba(74, 242, 196, .3); }
.ach-mark__badge { position: absolute; right: .06rem; top: .06rem; width: .3rem; height: .3rem; display: grid; place-items: center; background: #1c1206; border: 2px solid #ff9a2a; color: #ffad3a; }
.ach-mark__badge svg { width: .2rem; height: .2rem; }
@media (prefers-reduced-motion: reduce) {
  .ach, .ach__box, .ach-hex__seg, .ach-hex__label, .ach-top, .ach__loader i, .ach__loader b { animation: none !important; }
}
/* a guest's panel: the login block */
.ach-gate { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: .3rem 1rem; text-align: center; }
.ach-gate__mark .emblem { margin: 0; animation: none; }
.ach-gate__mark .emblem__svg { width: .9rem; height: .98rem; }
.ach-gate__mark .emblem__svg circle { animation: none; }
.ach-gate__title { font-size: .42rem; font-weight: 800; color: #f2f6f5; letter-spacing: .04em; }
.ach-gate p { margin: 0; max-width: 10rem; font-size: .26rem; line-height: 1.5; color: #b9c2bf; }
.ach-gate p.ach-gate__local { color: var(--mint-400); }

/* ==========================================================================================
   名片 (js/ui/namecards.js, 2026-10-14): the account's namecard under a name — a layer behind the content of a
   `.has-nc` plate (lobby chip, account dialog, 成就统计, 好友 rows, room seats, settlement plates), darker on the
   left where the name sits; then the picker.
   ========================================================================================== */
.has-nc { position: relative; isolation: isolate; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
/* 名片的画幅 (维护者 2026-10-27): 名片一律 4:1（长比宽 = 4:1），凡是铺名片的底板都只由宽度推高度 —— 大厅右上角、
   我的信息、上传预览、准备大厅席位、选择策略…… 都一样，图不会被裁成不同的形状。底下几处 `.nc-ar` 就取这个值；
   上传的裁剪框（ui/customNamecard.js NAMECARD_ASPECT）与它同步，720×180。 */
.has-nc { --nc-ar: 4 / 1; }
.nc-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: var(--nc-shade, linear-gradient(90deg, rgba(8, 11, 11, .9), rgba(8, 11, 11, .62) 50%, rgba(8, 11, 11, .2))), var(--nc) center / cover no-repeat, #101514; }
.ach-card.has-nc { background: #101514; --nc-shade: linear-gradient(90deg, rgba(6, 9, 9, .5), rgba(6, 9, 9, .12) 55%, transparent); }
.ach-card.has-nc .ach-card__brand { display: none; }
.acct-me.has-nc { padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 4px; --nc-shade: linear-gradient(90deg, rgba(8, 11, 11, .82), rgba(8, 11, 11, .45) 55%, rgba(8, 11, 11, .1)); }
.acct-me.has-nc .acct-who small, .acct-title-card.has-nc .acct-title-card__who small { color: #d6dedb; }
.acct-title-card.has-nc { --nc-shade: linear-gradient(90deg, rgba(8, 11, 11, .84), rgba(8, 11, 11, .5) 55%, rgba(8, 11, 11, .2)); }
.me-chip.has-nc { border-color: rgba(255, 255, 255, .22); }
.rseat__plate.has-nc, .tcard__plate.has-nc, .frow.has-nc { --nc-shade: linear-gradient(90deg, rgba(8, 11, 11, .86), rgba(8, 11, 11, .5) 55%, rgba(8, 11, 11, .12)); }
.dorder__card.has-nc { --nc-shade: linear-gradient(90deg, rgba(8, 11, 11, .84), rgba(8, 11, 11, .45) 40%, rgba(8, 11, 11, .25)); }
.splate__info.has-nc { --nc-shade: linear-gradient(90deg, rgba(8, 30, 25, .78), rgba(8, 20, 18, .4) 60%, rgba(8, 11, 11, .1)); }

.nc-pick { position: fixed; inset: 0; z-index: 420; display: grid; place-items: center; padding: 12px; background: rgba(3, 8, 6, .6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.nc-pick__panel { width: min(780px, 100%); max-height: min(620px, calc(var(--sp-vh, 1vh) * 100 - 24px)); display: flex; flex-direction: column; color: #e6ecea;
  background: #0d1211; border: 1px solid rgba(78, 216, 175, .35); box-shadow: 0 12px 40px rgba(0, 0, 0, .6); font-size: 14px; }
.nc-pick__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.nc-pick__head strong { font-family: var(--font-display); font-size: 12px; letter-spacing: .12em; color: var(--mint-400); }
.nc-pick__title { font-size: 16px; font-weight: 700; }
.nc-pick__x { margin-left: auto; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: #cfd8d5; font-size: 24px; line-height: 1; cursor: pointer; }
.nc-pick__x:hover { color: var(--mint-400); }
.nc-pick__status { margin: 0; padding: 8px 14px 0; color: #9aa6a2; }
.nc-pick__status:empty { display: none; }
.nc-pick__status.is-error { color: #ff8a7a; }
.nc-pick__grid { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  grid-auto-rows: max-content; align-content: start; gap: 8px; padding: 10px 14px 14px; }
.nc-pick__theme { grid-column: 1 / -1; margin: 8px 0 0; font-size: 13px; font-weight: 700; color: #b9c2bf; }
.nc-pick__theme:first-child { margin-top: 0; }
.nc-pick__card { position: relative; padding: 0; border: 2px solid transparent; border-radius: 4px; background: #101514; cursor: pointer; }
.nc-pick__card img { width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; display: block; border-radius: 2px; }
.nc-pick__card:hover, .nc-pick__card:focus-visible { border-color: rgba(78, 216, 175, .6); outline: none; }
.nc-pick__card.is-on { border-color: var(--mint-400); }
.nc-pick__card.is-busy { opacity: .55; }
.nc-pick__card--upload { width: 100%; }
.nc-pick__card--upload .nc-pick__upload { width: 100%; aspect-ratio: 4 / 1; min-height: 44px; justify-content: center; gap: .1rem; border: 1px dashed rgba(120,220,190,.45); color: var(--mint-300, #7fe7c9); background: rgba(12,20,18,.6); }
.nc-pick__card--upload .nc-pick__upload .icon { width: .2rem; height: .2rem; }
.nc-pick__card--upload:disabled { opacity: .5; cursor: default; }
.nc-pick__on { position: absolute; right: 4px; bottom: 4px; padding: 1px 6px; font-size: 11px; font-weight: 700; color: #06231b; background: var(--mint-400); border-radius: 2px; }
.nc-pick__foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.nc-pick__foot small { flex: 1; min-width: 0; color: #8c9894; }
@media (max-width: 560px), (max-height: 520px) {
  .nc-pick__grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .nc-pick__foot small { display: none; }
}
/* the account's 获赞 on the plate, 导入本机记录 (2026-10-14: the panel reads the account's records) */
.ach-counts__likes small .icon { fill: #ffad3a; }
.ach-counts__likes b { color: #ffad3a; }
.ach-import { display: flex; align-items: center; gap: .14rem; margin: .16rem 0 0; padding: .1rem .16rem; font-size: .2rem; color: #dfe6e3;
  background: rgba(74, 242, 196, .08); box-shadow: inset 0 0 0 1px rgba(74, 242, 196, .3); }
.ach-import > .icon { width: .24rem; height: .24rem; flex: none; color: var(--mint-400); }
.ach-import > span { flex: 1; min-width: 0; }

/* ==========================================================================================
   好友 (ui/friends.js, 2026-10-14): the hub tile, the panel (a Modal), the invitation banners.
   ========================================================================================== */
.hub-tile--friends { position: relative; }
.hub-tile__sub { margin-left: .08rem; font-size: calc(.13 * var(--t)); font-weight: 600; color: var(--mint-400); }
.hub-tile__badge { position: absolute; right: .1rem; top: 50%; transform: translateY(-50%); min-width: .3rem; height: .3rem; padding: 0 .07rem; display: grid; place-items: center;
  border-radius: .15rem; background: #ff9a2a; color: #2a1404; font-size: calc(.16 * var(--t)); font-weight: 800; }
.fglyph { width: 1em; height: 1em; fill: currentColor; flex: none; }

.fr { display: flex; flex-direction: column; gap: .14rem; min-width: 0; font-size: max(calc(.18 * var(--t)), 12px); }
.fr--guest { align-items: flex-start; gap: .2rem; color: var(--text-lo); }
.fr__add { display: flex; gap: .12rem; align-items: stretch; }
.fr__add > :first-child { flex: 1; min-width: 0; }
.fr__me { display: flex; flex-wrap: wrap; align-items: center; gap: .08rem .14rem; margin: 0; color: var(--text-lo); }
.fr__me > b { color: var(--text-hi); font-weight: 700; }
.fr__got { display: inline-flex; align-items: center; gap: .05rem; margin-left: auto; color: #ffad3a; font-weight: 700; }
.fr__tabs { display: flex; gap: .06rem; border-bottom: 1px solid rgba(223, 230, 226, .14); }
.fr__tabs button { position: relative; display: inline-flex; align-items: center; gap: .08rem; padding: .08rem .2rem; border: 0; background: none; color: var(--text-lo); font: inherit; font-weight: 700; cursor: pointer; }
.fr__tabs button .num { color: var(--text-dim); font-weight: 600; }
.fr__tabs button.is-on { color: var(--mint-400); box-shadow: inset 0 -2px 0 var(--mint-500); }
.fr__badge { min-width: .26rem; height: .26rem; padding: 0 .06rem; display: grid; place-items: center; border-radius: .13rem; background: #ff9a2a; color: #2a1404; font-size: .8em; }
.fr__list { list-style: none; margin: 0; padding: 0 0 3px; display: flex; flex-direction: column; gap: .08rem; max-height: min(4.6rem, 52vh); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.fr__reqs h4 { margin: .08rem 0 .06rem; font-size: .9em; color: var(--text-dim); font-weight: 700; }
.fr__empty, .fr__note { margin: 0; color: var(--text-dim); }
.fr__note { font-size: .86em; }
.fr__loading { display: grid; place-items: center; min-height: 1.2rem; }
.frow { display: flex; align-items: center; gap: .14rem; padding: .08rem .12rem; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(223, 230, 226, .1); }
.frow.is-on { box-shadow: inset 0 0 0 1px rgba(74, 242, 196, .3); }
.frow__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .02rem; }
.frow__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text-hi); }
.frow__name .acct-tag { color: var(--text-dim); font-weight: 400; }
.frow__who small { display: flex; align-items: center; gap: .06rem; color: var(--text-dim); white-space: nowrap; }
.frow__dot { width: .1rem; height: .1rem; border-radius: 50%; background: #5d6664; flex: none; }
.frow.is-on .frow__dot { background: var(--mint-400); box-shadow: 0 0 .06rem var(--mint-400); }
.frow.is-on .frow__state { color: var(--mint-400); }
.frow__likes { display: inline-flex; align-items: center; gap: .03rem; margin-left: .1rem; color: #ffad3a; }
.frow__acts { display: flex; align-items: center; gap: .06rem; flex: none; }
.frow__x { width: .4rem; height: .4rem; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--text-dim); cursor: pointer; }
.frow__x:hover { color: #ff6a5a; }
.fava { display: grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%; background: #1d2423; box-shadow: 0 0 0 1px rgba(223, 230, 226, .3); color: var(--mint-400); }
.fava img { width: 100%; height: 100%; object-fit: cover; }
.fava--md { width: max(.6rem, 34px); height: max(.6rem, 34px); }
.fava--sm { width: max(.44rem, 26px); height: max(.44rem, 26px); }
.finv-host { position: fixed; right: max(12px, .2rem); top: max(60px, .9rem); z-index: calc(var(--z-modal) + 1); display: flex; flex-direction: column; gap: 8px; width: min(4.6rem, calc(100vw - 24px)); pointer-events: none; }
.finv { display: flex; align-items: center; gap: .12rem; padding: .1rem .14rem; pointer-events: auto; font-size: max(calc(.18 * var(--t)), 12px);
  background: rgba(10, 16, 15, .96); box-shadow: inset 0 0 0 1px rgba(255, 170, 60, .55), 0 .06rem .3rem rgba(0, 0, 0, .6); animation: finv-in 260ms var(--ease-out) both; }
@keyframes finv-in { from { opacity: 0; transform: translateX(.3rem); } }
.finv__text { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--text-lo); }
.finv__text b { color: var(--text-hi); }
.finv__text small { color: #ffad3a; }
.finv__x { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--text-dim); cursor: pointer; }
@media (max-width: 640px) {
  .frow { flex-wrap: wrap; }
  .frow__acts { width: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .finv { animation: none; } }

/* 成就奖杯等级 (ui/trophies.js): the official chess-piece badge of the cumulative trophies; the SVG rook while the pack is
   missing, tinted per level. Inline after a name in the room seats, the draft order and the settlement team cards. */
.tbadge { display: inline-grid; place-items: center; flex: none; object-fit: contain; width: .3rem; height: .3rem; }
.tbadge--svg .icon { width: 100%; height: 100%; }
.tbadge--svg.tbadge--1 { color: #e8efec; }
.tbadge--svg.tbadge--2 { color: #7fd6c4; }
.tbadge--svg.tbadge--3 { color: #d9c08a; }
.tbadge--svg.tbadge--4 { color: #f2c14e; }
.tbadge--svg.tbadge--5 { color: #f08a3a; }
.tbadge--inline { width: 1.35em; height: 1.35em; margin-right: .2em; vertical-align: middle; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
.hub-ach__rank > .tbadge { width: .34rem; height: .34rem; }
.splate__rank > .tbadge { width: .44rem; height: .44rem; }

/* ==========================================================================================
   本服部件 (2026-10-14): what this fork keeps inside the adopted design — the 公告 card and board, the feedback group and
   the design credit, the queue (ui/matchmaking.js QueueFlow / MatchmakingPanel) in the hub's frame, the room's AI
   controls and party queue, 服主, 名片底图 of the server's material, the 成就 list, 服主验证 in 设置.
   ========================================================================================== */
.lobby-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 6px var(--amber); flex: none; }

/* 公告 in the right column (the design's public room list is not part of this server) */
.hub-notice { flex: none; width: 100%; display: flex; flex-direction: column; gap: 0; padding: 0; text-align: left; color: var(--text-hi); cursor: pointer;
  background: rgba(8, 15, 14, .92); background: linear-gradient(180deg, rgba(9, 17, 16, .88), rgba(6, 11, 10, .9)); border: 1px solid rgba(223, 230, 226, .14);
  border-top: 2px solid var(--mint-500); box-shadow: 0 .06rem .24rem rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color var(--t-fast); }
.hub-notice:hover, .hub-notice:focus-visible { border-color: var(--mint-a35); outline: none; }
.hub-notice.is-unread { border-top-color: var(--amber); }
.hub-notice__head { display: flex; align-items: center; gap: .08rem; height: max(.42rem, 28px); padding: 0 .1rem 0 .14rem; border-bottom: 1px solid rgba(223, 230, 226, .08); }
.hub-notice__title { font-size: max(calc(.17 * var(--t)), 13px); font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.hub-notice__en { font: 700 max(.1rem, 9px)/1 ui-monospace, Consolas, monospace; letter-spacing: .2em; color: var(--mint-400); opacity: .7; }
.hub-notice__more { margin-left: auto; display: inline-flex; align-items: center; gap: .02rem; font-size: max(calc(.13 * var(--t)), 11px); color: rgba(223, 230, 226, .72); white-space: nowrap; }
.hub-notice__more .icon { width: 1.1em; height: 1.1em; }
.hub-notice__body { display: flex; flex-direction: column; justify-content: center; gap: .04rem; min-height: max(.86rem, 52px); padding: .1rem .14rem; }
.hub-notice__body b { font-size: max(calc(.16 * var(--t)), 13px); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hub-notice__body small { font-size: max(calc(.12 * var(--t)), 10px); color: var(--text-lo); }
.hub-notice__body .t-dim { font-size: max(calc(.14 * var(--t)), 11px); }

/* the feedback group and the design credit at the bottom of the left column */
.hub-contact { display: flex; flex-direction: column; align-items: flex-start; gap: .06rem; margin-top: auto; }
.lobby-feedback { min-height: 40px; padding-inline: 10px; font-size: max(calc(.14 * var(--t)), 12px); color: var(--mint-400); border-color: var(--mint-700); letter-spacing: .04em; }
.lobby-feedback .icon { width: 14px; height: 14px; }
.lobby-feedback__label { margin-right: 6px; color: var(--text-md); letter-spacing: 0; }
.hub-contact__row { display: flex; flex-wrap: wrap; align-items: center; gap: .06rem; max-width: 100%; }
.hub-boards { display: flex; flex-wrap: wrap; align-items: center; gap: .06rem; }
.hub-board { min-height: 40px; padding-inline: 10px; font-size: max(calc(.14 * var(--t)), 12px); color: var(--text-hi); letter-spacing: .04em; text-decoration: none; }
.hub-board .icon { width: 14px; height: 14px; color: var(--mint-400); }
/* a narrow left column (phones, small tablets) keeps the row to one line: the status link shows only its icon */
:is(.sp-touch, .sp-coarse) .hub-board--status { width: 40px; padding-inline: 0; }
:is(.sp-touch, .sp-coarse) .hub-board--status .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1120px) {
  .hub-board--status { width: 40px; padding-inline: 0; }
  .hub-board--status .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.hub-credit { margin: 0; padding: .03rem .1rem; font-size: max(calc(.12 * var(--t)), 10px); line-height: 1.5; color: rgba(223, 230, 226, .62); background: rgba(6, 10, 10, .55); }
.hub-credit b { color: rgba(223, 230, 226, .85); font-weight: 600; }
.hub-credit__sep { margin: 0 .06rem; }
.hub-foot { color: rgba(223, 230, 226, .5); }
.hub-repo { color: inherit; text-decoration: underline; text-underline-offset: .02rem; }
.hub-repo:hover { color: var(--mint-400); }
.hub-dev { display: block; color: var(--amber); font-weight: 700; }
.ally-note { display: block; margin-top: .04rem; font-size: max(calc(.12 * var(--t)), 10px); }
.join-foot__note { flex-basis: 100%; font-size: max(calc(.12 * var(--t)), 11px); }

/* 全屏 where the browser has none (iPhone): the explanation button, sized like its neighbours */
.hub-fs-btn--help.fsbtn { width: max(.44rem, 32px); height: max(.44rem, 32px); min-width: 0; padding: 0; display: grid; place-items: center;
  color: var(--text-hi); background: rgba(20, 28, 26, .8); border: 1px solid var(--line-2); }

/* the hub's queue strip and the queue in 选择模拟协议 */
.hub-searching { display: flex; align-items: center; gap: .12rem; padding: .08rem .12rem; background: rgba(8, 15, 14, .9); }
.hub-searching .matchmaking-hud__info { display: flex; align-items: center; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.hub-searching .matchmaking-hud__text { font-size: max(calc(.16 * var(--t)), 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proto-side--search { justify-content: center; }
.proto-side--search > .mf-search, .proto-side--search > .mf-found, .proto-side--search > .mf-offer { position: relative; width: 100%; }
.mf-offer .matchmaking { margin: 0; padding: .2rem .24rem; }
.mf-offer .matchmaking h2 { font-size: max(calc(.3 * var(--t)), 18px); }
.mf-offer .matchmaking__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem; }
.mf-offer .matchmaking__actions .btn { min-height: 44px; }
.proto-opts .matchmaking__help { margin-left: auto; }

/* the room's party queue: the team on the left, the queue over the right (the seats stay visible behind) */
.rs-queue { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) min(6.2rem, 46vw); background: rgba(5, 6, 6, .55); }
.rs-queue__team { align-self: end; margin: 0 0 1.4rem .4rem; max-width: 5.4rem; padding: .16rem .2rem; background: rgba(8, 15, 14, .9); border-left: 3px solid var(--mint-500); }
.rs-queue__team h2 { margin: .04rem 0; font-size: max(calc(.28 * var(--t)), 16px); }
.rs-queue__team p { margin: 0; font-size: max(calc(.15 * var(--t)), 12px); line-height: 1.5; color: var(--text-md); }
.rs-queue > .rs-searchpanel, .rs-queue > .mf-offer.rs-searchpanel, .rs-queue > .mf-found { position: relative; inset: auto; width: auto; height: 100%; }
.rs-queue > .mf-offer { display: flex; flex-direction: column; justify-content: center; padding: .4rem .3rem; background: rgba(6, 7, 7, .94); }

/* AI teammates in the room: 添加 AI 队友 under an empty seat, the strategy chip over an AI's plate, its ✕ */
.rseat__addbot { display: flex; align-items: center; justify-content: center; gap: .08rem; min-height: max(.76rem, 46px); margin-top: .08rem; padding: .06rem .1rem;
  font: inherit; font-size: max(calc(.17 * var(--t)), 12px); font-weight: 800; color: #5df0c6; background: rgba(10, 30, 25, .85); border: 1px dashed rgba(79, 232, 192, .6); cursor: pointer; }
.rseat__addbot:hover:not(:disabled) { background: rgba(20, 60, 48, .9); border-style: solid; }
.rseat__addbot:disabled { opacity: .55; cursor: default; }
.rseat__addbot .icon { width: 1.2em; height: 1.2em; }
.rseat__band { display: flex; align-items: center; gap: .06rem; width: 100%; min-height: max(.42rem, 28px); margin-top: .06rem; padding: 0 .1rem; font: inherit;
  font-size: max(calc(.14 * var(--t)), 11px); color: var(--text-hi); background: rgba(14, 20, 19, .92); border: 1px solid rgba(255, 255, 255, .14); text-align: left; }
.rseat__band.is-editable { cursor: pointer; border-color: rgba(79, 232, 192, .45); }
.rseat__band.is-editable:hover:not(:disabled) { background: rgba(20, 48, 40, .92); }
.rseat__band .seat__band-k { flex: none; padding: 0 .06rem; font-size: .9em; color: #08221b; background: #4fe8c0; }
.rseat__band .seat__band-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rseat__band > .icon { flex: none; width: 1.1em; height: 1.1em; color: var(--text-lo); }
.rseat__band .bandicon { width: max(.3rem, 18px); height: max(.3rem, 18px); flex: none; }
.rseat__kick--bot { color: #c9cecc; background: #1c2221; border-color: rgba(255, 255, 255, .3); }
.room-capacity { color: var(--amber) !important; }
.rs-tools .ping, .rs-tools .server-load-button { min-height: max(.44rem, 30px); }
.rs-opt--exp { width: 100%; padding: .08rem .1rem; font: inherit; color: var(--text-hi); text-align: left; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); cursor: pointer; }
.rs-opt--exp:hover:not(:disabled) { border-color: var(--mint-a35); }
.rs-opt--exp > .icon { flex: none; width: 1.1em; height: 1.1em; }
/* 实验性选项 at the left of the room's bottom bar (the summary below the label; mint when an option is changed) */
.rs-foot__left { display: flex; align-items: flex-end; gap: .08rem; flex-wrap: wrap; }
.rs-exp { display: inline-flex; align-items: center; gap: .1rem; max-width: 100%; min-height: max(.6rem, 40px); padding: .06rem .18rem .06rem .14rem; font: inherit;
  font-size: max(calc(.18 * var(--t)), 12px); color: #dfe3e1; text-align: left; background: rgba(12, 15, 15, .82); border: 1px solid rgba(255, 255, 255, .22); cursor: pointer; }
.rs-exp > .icon { flex: none; width: 1.2em; height: 1.2em; color: #9aa19e; }
.rs-exp > span { display: flex; flex-direction: column; min-width: 0; }
.rs-exp b { font-weight: 700; white-space: nowrap; }
.rs-exp small { overflow: hidden; font-size: .8em; color: #8d9391; text-overflow: ellipsis; white-space: nowrap; }
.rs-exp:hover:not(:disabled) { border-color: var(--mint-a35); background: rgba(20, 30, 28, .9); }
/* AI 队友最后选择 (room.setAiPicksLast) sits next to 实验性选项: a switch on the left of the label */
.rs-exp--ai { padding-left: .12rem; }
.rs-exp--ai:disabled { opacity: .55; cursor: default; }
.rs-exp__switch { position: relative; flex: none; width: max(.4rem, 26px); height: max(.2rem, 13px); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: rgba(0, 0, 0, .45); }
.rs-exp__switch::after { content: ''; position: absolute; top: 50%; left: .03rem; width: max(.16rem, 10px); height: max(.16rem, 10px); margin-top: calc(max(.16rem, 10px) / -2); border-radius: 50%; background: #9aa19e; transition: left 120ms ease, background 120ms ease; }
.rs-exp__switch.is-on { border-color: var(--mint-400); background: rgba(40, 120, 96, .5); }
.rs-exp__switch.is-on::after { left: calc(100% - max(.16rem, 10px) - .03rem); background: var(--mint-400); }
.rs-exp--ai.is-on { border-color: rgba(79, 232, 192, .45); }
.rs-exp:disabled { cursor: default; opacity: .6; }
.rs-exp.is-on { border-color: var(--mint-a35); }
.rs-exp.is-on > .icon, .rs-exp.is-on small { color: #4fe8c0; }
@media (max-height: 520px), (max-width: 900px) {
  .rs-exp small { display: none; }
}
/* portrait phones: 实验性选项 gets its own row under the pill, 组队匹配 / 开始模拟 keep the full width */
@media (max-width: 640px) {
  .rs-foot__left, .rs-foot__right { grid-column: 1 / -1; }
  .rs-foot__left { justify-content: center; }
  .rs-exp { min-height: 36px; }
  .rs-go .proto-start__mark { display: none; }
  .rs-go .proto-start__label { white-space: nowrap; }
}

/* 名片底图 behind a plate: the loading pictures fill it; a faction emblem sits at the right on the faction's colour */
.rseat__plate.has-nc, .me-chip.has-nc { overflow: hidden; }
.nc-layer--camp { background: var(--nc-shade, linear-gradient(90deg, rgba(8, 11, 11, .86), rgba(8, 11, 11, .5) 55%, rgba(8, 11, 11, .12))),
  var(--nc) right 6% center / auto 150% no-repeat, var(--nc-tint, #1d2624); }
/* 更换名片底图 (维护者 2026-10-26): 放在名片的右下角，别压住上面的名字 / 编号 */
.rseat__bg { position: absolute; right: .04rem; bottom: .04rem; z-index: 1; display: grid; place-items: center; width: max(.3rem, 22px); height: max(.3rem, 22px); padding: 0;
  color: #eef0ef; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .25); border-radius: 3px; cursor: pointer; opacity: .7; }
.rseat__bg:hover, .rseat__bg:focus-visible { opacity: 1; border-color: #5df0c6; }
.rseat__bg .icon { width: 70%; height: 70%; }
/* 头像: one's own plate avatar opens the picker */
.rseat__ava { grid-row: 1 / 3; position: relative; z-index: 1; display: block; padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.rseat__ava:hover .avatar, .rseat__ava:focus-visible .avatar { filter: brightness(1.15); }
.rseat__ava-pen { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: max(.18rem, 11px); height: max(.18rem, 11px);
  color: #08221b; background: #4fe8c0; border-radius: 2px; opacity: .85; }
.rseat__ava:hover .rseat__ava-pen, .rseat__ava:focus-visible .rseat__ava-pen { opacity: 1; }
.rseat__ava-pen .icon { width: 75%; height: 75%; }
.nc-pick__card { display: flex; flex-direction: column; text-align: left; }
.nc-pick__art { position: relative; display: flex; align-items: center; gap: .08rem; width: 100%; aspect-ratio: 4 / 1; padding: 0 12px; border-radius: 2px; overflow: hidden;
  color: #eef3f1; font-size: 13px; font-weight: 700; background: #101514; }

/* 服主 */
.sp-owner-name { color: #ffd27a !important; }
.sp-owner-badge { display: inline-flex; align-items: center; gap: 2px; flex: none; padding: 0 5px; font-size: max(calc(.12 * var(--t)), 10px); line-height: 1.5; font-weight: 700;
  color: #e4bd60; border: 1px solid #e4bd60; border-radius: 2px; white-space: nowrap; }
.sp-owner-badge .icon { width: 1.1em; height: 1.1em; }
.rseat.is-owner .rseat__plate { border-color: rgba(228, 189, 96, .65); }
.set-owner { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.set-owner h4 { margin: 0; font-size: 14px; color: var(--text-hi); }
.set-owner__row { display: flex; gap: 8px; align-items: center; }
.set-owner__row input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 10px; font: inherit; font-size: 16px; color: var(--text-hi); background: var(--bg-3); border: 1px solid var(--line-2); }

/* 成就统计 (ui/achievements.js): the 名片底图 button on the card, the achievement rows, the local-data note */
.ach-card__nc { align-self: flex-start; display: inline-flex; align-items: center; gap: .04rem; padding: .02rem .1rem; font: inherit; font-size: .17rem;
  color: #e6ecea; background: rgba(8, 12, 11, .55); border: 1px solid rgba(255, 255, 255, .3); border-radius: .03rem; cursor: pointer; }
.ach-card__nc:hover { border-color: var(--mint-400); }
.ach-card__nc .icon { width: 1em; height: 1em; }
.ach-card__edits { display: flex; flex-wrap: wrap; gap: .06rem; }
.ach-marks--list { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .16rem .3rem; padding-left: .8rem; }
.ach-mark--row { flex-direction: row; align-items: center; gap: .2rem; }
.ach-mark--row .ach-mark__frame { width: 1rem; height: 1rem; flex: none; color: rgba(74, 242, 196, .5); }
.ach-mark--row .ach-mark__frame > .icon { width: .5rem; height: .5rem; }
.ach-mark--row.is-done .ach-mark__frame { color: #4af2c4; box-shadow: inset 0 0 0 2px rgba(74, 242, 196, .7), 0 0 .14rem rgba(74, 242, 196, .3); }
.ach-mark--row:not(.is-done) { opacity: .78; }
.ach-mark__badge .icon { width: .2rem; height: .2rem; }
.ach-mark__text { display: flex; flex-direction: column; gap: .04rem; min-width: 0; }
.ach-mark__text b { font-size: .28rem; }
.ach-mark__text small { font-size: .22rem; color: #a9b3b0; }
.ach-mark__got { font-size: .2rem; color: #4af2c4; }
.ach-mark__bar { position: relative; display: block; height: .26rem; background: rgba(220, 230, 226, .1); overflow: hidden; }
.ach-mark__bar i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(74, 242, 196, .5); }
.ach-mark__bar em { position: relative; padding-left: .08rem; font-style: normal; font-size: .18rem; line-height: .26rem; color: #e6ecea; }
.ach-tops--titles { flex-wrap: wrap; gap: .3rem .5rem; padding-left: .8rem; }
.ach-top--title .ach-top__frame { width: 1.4rem; height: 1.4rem; }
.ach-top--title .ach-top__frame img { width: 80%; height: 80%; object-fit: contain; }
.ach-top--title.is-none { opacity: .4; }
.ach-local { display: flex; align-items: center; gap: .1rem; margin: .4rem 0 .1rem .4rem; font-size: .22rem; color: #8c9894; }
.ach-local .icon { flex: none; width: 1.1em; height: 1.1em; }
@media (max-width: 1100px), (max-height: 560px) {
  .ach-top-area { grid-template-columns: minmax(0, 1fr); }
  .ach-marks--list { grid-template-columns: minmax(0, 1fr); padding-left: .2rem; }
  .ach-tops, .ach-tops--band, .ach-tops--titles { flex-wrap: wrap; gap: .3rem; padding-left: .2rem; }
}
@media (prefers-reduced-motion: reduce) { .hub-notice { transition: none; } }

/* 公告 board and the lobby's dialogs (the fork's lobby before the hub; ui/announcements.js), safe-area aware on phones */

.lobby-screen .modal {
  height: calc(var(--sp-vh, 1vh) * 100);
  padding: calc(16px + var(--sa-t, 0px)) calc(16px + var(--sa-r, 0px)) calc(16px + var(--sa-b, 0px)) calc(16px + var(--sa-l, 0px));
}
.lobby-dialog {
  width: min(10rem, calc(100vw - var(--sa-l, 0px) - var(--sa-r, 0px) - 32px));
  max-height: calc(var(--sp-vh, 1vh) * 100 - var(--sa-t, 0px) - var(--sa-b, 0px) - 32px);
  min-height: 0;
}
.lobby-dialog .modal__head { flex: none; }
.lobby-dialog .modal__body { min-height: 0; overscroll-behavior: contain; }
.lobby-dialog .modal__title { font-size: max(calc(.26 * var(--t)), 18px); }
.lobby-dialog .modal__text, .lobby-protocol-text { font-size: max(calc(.18 * var(--t)), 14px); line-height: 1.65; }
.lobby-dialog .modal__text + .modal__text { margin-top: .16rem; }
.lobby-protocol-text { display: flex; flex-direction: column; gap: .12rem; }
.lobby-protocol-text ul { padding-left: 1.4em; }
.announcement-list { display: flex; flex-direction: column; gap: .24rem; }
.announcement-entry { overflow-wrap: anywhere; }
.announcement-entry + .announcement-entry { border-top: 1px solid var(--line); padding-top: .22rem; }
.announcement-entry header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .2rem; margin-bottom: .12rem; }
.announcement-entry h3 { font-size: max(calc(.23 * var(--t)), 16px); color: var(--text-hi); }
.announcement-date { font-size: max(calc(.14 * var(--t)), 12px); color: var(--text-lo); }
.announcement-entry p { white-space: pre-wrap; font-size: max(calc(.18 * var(--t)), 14px); line-height: 1.7; }
.announcement-entry p + p { margin-top: .12rem; }
.announcement-state { display: flex; flex-direction: column; align-items: center; gap: .14rem; padding-block: .36rem; text-align: center; }
.announcement-state > .icon { width: .4rem; height: .4rem; color: var(--mint-400); }
.announcement-state h3 { color: var(--text-hi); font-size: max(calc(.22 * var(--t)), 16px); }
.announcement-state p { font-size: max(calc(.17 * var(--t)), 14px); line-height: 1.6; }
.announcement-board .modal__body { display: flex; flex-direction: column; flex: 1; gap: 12px; overflow: hidden; }
.announcement-scroll { min-height: 0; flex: 1; overflow-y: scroll; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 12px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.announcement-scroll::-webkit-scrollbar { width: 8px; }.announcement-scroll::-webkit-scrollbar-track { background: var(--bg-3); }.announcement-scroll::-webkit-scrollbar-thumb { background: var(--mint-700); border: 2px solid var(--bg-3); border-radius: 4px; }
.announcement-reading { flex: none; display: flex; flex-direction: column; gap: 7px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--text-lo); font-size: 12px; }
.announcement-reading__track { height: 3px; background: var(--bg-4); overflow: hidden; }.announcement-reading__track i { display: block; width: 100%; height: 100%; background: var(--mint-500); transform-origin: left; }
.announcement-reading > span { display: flex; align-items: center; justify-content: center; gap: 6px; }.announcement-reading .icon { width: 14px; height: 14px; transform: rotate(90deg); }
.announcement-reading.has-more { color: var(--mint-400); }
.fullscreen-help { width: min(max(5.4rem, 320px), calc(100vw - 32px)); }.fullscreen-help p { font-size: max(calc(.17 * var(--t)), 14px); line-height: 1.65; }.fullscreen-help p + p { margin-top: 12px; }
.announcement-board .modal__actions .btn, .server-status-modal .modal__actions .btn, .fullscreen-help .modal__actions .btn { min-height: 40px; font-size: max(calc(.17 * var(--t)), 14px); padding-inline: 16px; }

@media (max-height: 460px) {
  .lobby-dialog .modal__head { padding: 12px 16px 4px; }
  .lobby-dialog .modal__body { padding: 8px 16px 12px; }
  .lobby-dialog .modal__actions { padding: 8px 16px; }
  .lobby-dialog .modal__actions .btn { min-height: 44px; font-size: 14px; }
  .lobby-dialog .micro { font-size: 10px; }
}

/* touch screens: inputs at 16px, so iOS does not zoom the page on focus */
:is(.sp-touch, .sp-coarse) :is(.ally-key input, .cardpick__search input, .sw-search input) { font-size: 16px; }
/* the 密钥加入 dialog's key field: 16 px at least, so iOS does not zoom the page on focus */
.lobby-screen .join-row .field--code .field__input { font-size: max(calc(.34 * var(--t)), 16px); }

/* the hub's narrow left column: the tips' title stays on one line (the micro label gives way) */
.hub-side .tips__head > span:not(.tips__idx) { white-space: nowrap; }
.hub-side .tips__head .micro { display: none; }
.ally-card--join .ally-note { padding: .04rem .16rem .08rem; }

/* the hub's top bar: a row (not the shared three-column grid — the hub has no centre title, and on a phone its tools
   would run into the name chip); the latency pill keeps one row; phones drop the connection label, the service caption,
   the 返回 / 名博士在线 words and DOCTOR #, keep the count and the buttons (36 px with their 10 px gap, so the 44 px hit
   areas of css/devices.css still do not overlap); portrait phones put the tools on a row of their own */
.hub-topbar { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: .24rem; }
.hub-topbar .topbar__left { flex: 0 1 auto; }
.hub-topbar .topbar__right { flex: none; margin-left: auto; }
.hub-topbar .latency-status { flex-wrap: nowrap; }
@media (max-height: 560px), (max-width: 767px) {
  .hub-topbar .connection-status, .hub-topbar .server-load__caption { display: none; }
  .hub-topbar .ping, .hub-topbar .server-load-button { min-height: 28px; height: 28px; }
  .hub-topbar .lobby-back .btn__label, .hub-topbar .online-word, .hub-topbar .me-chip__text .micro { display: none; }
  .hub-topbar .topbar__tools .btn--square.btn--sm, .sp-coarse .hub-topbar .topbar__tools .btn--square.btn--sm { --sq: 36px; }
  .hub-topbar .topbar__tools .fsbtn { width: 36px; height: 36px; min-width: 36px; }
  .hub-online { margin-right: 4px; padding-inline: 8px; }
  .hub-credit { max-width: 100%; }
}
@media (max-aspect-ratio: 4/3) {
  .hub-topbar { height: auto; row-gap: 6px; padding-block: 6px; }
  .hub-topbar .topbar__left { flex: 1 1 100%; flex-wrap: wrap; row-gap: 6px; }
  .hub-topbar .topbar__left > .topbar__sep { display: none; }
}

/* 统计数据入口（右上角 me-chip）：去掉旁边的改名铅笔后，整块放大一档 */
.hub-topbar .stats-entry { padding: .06rem .22rem .06rem .06rem; gap: .14rem; }
.hub-topbar .stats-entry .avatar { --av: .72rem; }
.hub-topbar .stats-entry .me-chip__name { font-size: calc(.2 * var(--t)); max-width: 3.1rem; }
.hub-topbar .stats-entry .me-chip__stats { width: .26rem; height: .26rem; margin-left: .06rem; }

/* 大厅音乐 card (ui/lobbyMusicPanel.js; the owner's request of 2026-10-20) — top-left, above 成就统计 */
.lobmusic { position: relative; left: var(--dx, 0); top: var(--dy, 0); z-index: 24; flex: none; min-width: 0;
  background: linear-gradient(180deg, rgba(9, 17, 16, .9), rgba(6, 11, 10, .92));
  border: 1px solid rgba(223, 230, 226, .16); border-top: 2px solid var(--mint-500);
  box-shadow: 0 .06rem .22rem rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lobmusic[data-moved="1"] { box-shadow: 0 .12rem .4rem rgba(0, 0, 0, .6); }
/* the head is the drag handle (玩家 2026-10-27): no text selection, and touch drags do not scroll the page */
.lobmusic__head { display: flex; align-items: center; gap: .08rem; height: .44rem; padding: 0 .08rem 0 .12rem;
  border-bottom: 1px solid rgba(223, 230, 226, .08); cursor: grab; touch-action: none;
  -webkit-user-select: none; user-select: none; }
.lobmusic__head:active { cursor: grabbing; }
.lobmusic[data-open="0"] .lobmusic__head { border-bottom: 0; }
/* 展开不再挤压下面（成就统计 / 反馈板）: the body floats over the page instead of growing the column */
.lobmusic__body { position: absolute; left: -1px; right: -1px; top: 100%; max-height: min(72vh, 7.6rem); overflow: auto;
  background: linear-gradient(180deg, rgba(9, 17, 16, .98), rgba(6, 11, 10, .99));
  border: 1px solid rgba(223, 230, 226, .16); border-top: 0; box-shadow: 0 .16rem .42rem rgba(0, 0, 0, .62); }
.lobmusic__icon { display: grid; place-items: center; width: .24rem; height: .24rem; flex: none; color: var(--mint-400);
  font-size: calc(.14 * var(--t)); border: 1px solid var(--mint-a35); }
.lobmusic__titles { display: flex; flex: 1 1 auto; align-items: baseline; gap: .08rem; min-width: 0; }
.lobmusic__titles strong { font-size: calc(.13 * var(--t)); font-weight: 800; color: var(--text-hi); white-space: nowrap; }
.lobmusic__titles em { font: 600 .075rem/1 ui-monospace, Consolas, monospace; letter-spacing: .16em; color: var(--text-dim);
  font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobmusic__fold { flex: none; }
.lobmusic__body { display: grid; gap: .08rem; padding: .1rem .12rem .12rem; }
.lobmusic__now { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: calc(.115 * var(--t)); font-weight: 700; color: var(--mint-300); }
.lobmusic__unused { width: 100%; height: .3rem; padding: 0 .08rem; font-size: calc(.12 * var(--t)); color: var(--text-hi);
  background: rgba(4, 9, 8, .9); border: 1px solid rgba(223, 230, 226, .22); }
.lobmusic__row { display: flex; align-items: center; gap: .06rem; min-width: 0; }
.lobmusic__btn { display: grid; place-items: center; width: .3rem; height: .26rem; flex: none; padding: 0;
  font-size: calc(.105 * var(--t)); letter-spacing: -.02em; color: var(--text-hi); background: rgba(12, 22, 20, .9); border: 1px solid rgba(223, 230, 226, .22);
  cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
.lobmusic__btn:hover { color: var(--mint-300); border-color: var(--mint-a35); }
.lobmusic__btn--play { width: .34rem; height: .3rem; font-size: calc(.12 * var(--t)); color: #04120e; background: var(--mint-400); border-color: var(--mint-400); }
.lobmusic__btn--play:hover { color: #04120e; background: var(--mint-300); }
.lobmusic__shuffle { display: inline-flex; align-items: center; gap: .05rem; margin-left: .02rem; min-width: 0;
  font-size: calc(.1 * var(--t)); color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.lobmusic__shuffle input { width: .12rem; height: .12rem; accent-color: var(--mint-500); }
.lobmusic__vol { display: flex; align-items: center; gap: .06rem; min-width: 0; font-size: calc(.105 * var(--t)); color: var(--text-dim); }
.lobmusic__vol span { flex: none; }
.lobmusic__vol input { flex: 1 1 auto; min-width: 0; height: .16rem; accent-color: var(--mint-500); }
.lobmusic__vol b { flex: none; min-width: .26rem; padding-right: .02rem; text-align: right; font: 700 .1rem/1 ui-monospace, Consolas, monospace; color: var(--mint-300); }
.lobmusic__note { margin: .02rem 0 0; font-size: calc(.095 * var(--t)); line-height: 1.35; }
.lobmusic__note.is-bad { color: var(--danger, #ef6a6a); }
.lobmusic__file { display: flex; align-items: center; gap: .08rem; min-width: 0; }
.lobmusic__file small { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: calc(.1 * var(--t)); color: var(--text-dim); }
/* 主界面音乐库 (维护者 2026-10-27): selena 0.4.1 的全部 246 首，按 悬赏/阵营/Boss/敌人/结算/其他/主界面 折叠分组，
   配搜索框——卡片仍是紧凑的一张，任何一首一两下点到。 */
.lobmusic__libhead { display: flex; align-items: center; gap: .08rem; min-width: 0; }
.lobmusic__libhead strong { flex: 1 1 auto; min-width: 0; font-size: calc(.105 * var(--t)); color: var(--text-dim); }
.lobmusic__libhead small { margin-left: .04rem; font: 700 .085rem/1 ui-monospace, Consolas, monospace; color: var(--mint-300); }
.lobmusic__chip { flex: none; padding: .02rem .07rem; font-size: calc(.095 * var(--t)); color: var(--text-dim); cursor: pointer;
  background: rgba(10, 20, 18, .85); border: 1px solid var(--mint-a35); border-radius: .2rem; }
.lobmusic__chip[aria-pressed="true"], .lobmusic__chip:hover { color: var(--mint-300); border-color: var(--mint-a55, rgba(78, 216, 175, .55)); }
.lobmusic__groups { display: grid; gap: .04rem; min-width: 0; }
.lobmusic__group { min-width: 0; }
.lobmusic__group > summary { display: flex; align-items: center; gap: .05rem; cursor: pointer; list-style: none;
  font-size: calc(.105 * var(--t)); color: var(--text-dim); }
.lobmusic__group > summary::-webkit-details-marker { display: none; }
.lobmusic__group > summary::before { content: '▸'; font-size: calc(.08 * var(--t)); color: var(--mint-400); }
.lobmusic__group[open] > summary::before { content: '▾'; }
.lobmusic__group > summary small { margin-left: auto; font: 700 .082rem/1 ui-monospace, Consolas, monospace; color: var(--mint-300); }
.lobmusic__group--own > summary { color: var(--mint-300); }
.lobmusic__group--own > summary::before { color: var(--mint-300); }
.lobmusic__upload { justify-self: start; padding: .02rem .08rem; font-size: calc(.1 * var(--t)); color: var(--text-dim); cursor: pointer;
  background: transparent; border: 1px dashed var(--mint-a35); border-radius: .03rem; }
.lobmusic__upload:hover { color: var(--mint-300); border-color: var(--mint-400); }
.lobmusic__search { width: 100%; height: .26rem; margin-top: .06rem; padding: 0 .08rem; font-size: calc(.105 * var(--t));
  color: var(--text-hi); background: rgba(10, 20, 18, .85); border: 1px solid var(--mint-a35); border-radius: .04rem; }
.lobmusic__search:focus-visible { outline: 1px solid var(--mint-400); outline-offset: 1px; }
.lobmusic__list { display: grid; gap: .02rem; max-height: 1.6rem; margin: .04rem 0 .06rem .1rem; overflow: auto; overscroll-behavior: contain; }
.lobmusic__track { display: flex; align-items: center; gap: .06rem; min-width: 0; padding: .03rem .06rem; text-align: left;
  font-size: calc(.105 * var(--t)); color: var(--text-dim); background: transparent; border: 0; border-radius: .03rem; cursor: pointer; }
.lobmusic__track > span:first-child { flex: none; width: .1rem; color: var(--mint-400); }
.lobmusic__track > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobmusic__track small { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: calc(.088 * var(--t)); color: var(--text-mute, var(--text-dim)); opacity: .75; }
.lobmusic__track:hover, .lobmusic__track:focus-visible { color: var(--text-hi); background: rgba(78, 216, 175, .1); }
.lobmusic__track[aria-pressed="true"] { color: var(--mint-300); }
@media (max-width: 64rem) { .lobmusic__row { flex-wrap: wrap; } }

/* 界面#10: the top bar's 名片 button (MeCard) and the 我的信息 dialog. 4:1 (维护者 2026-10-27): the width grew from
   3.05rem so the .74rem avatar still fits the shorter card and the plate keeps the room seat's height. */
.hub-topbar .me-card { --me-w: 3.5rem; position: relative; display: flex; align-items: center; gap: .12rem;
  width: var(--me-w); height: auto; aspect-ratio: var(--nc-ar, 4 / 1); flex: none; padding: .06rem .14rem .06rem .06rem; overflow: hidden;
  border: 1px solid rgba(78, 216, 175, .34); border-radius: .04rem; background: #0b1110; color: inherit;
  text-align: left; cursor: pointer; }
.hub-topbar .me-card:hover, .hub-topbar .me-card:focus-visible { border-color: var(--mint-400); }
.hub-topbar .me-card > .nc-layer { z-index: 0; }
.hub-topbar .me-card__ava { position: relative; z-index: 1; width: .74rem; height: .74rem; flex: none;
  display: grid; place-items: center; overflow: hidden; background: #1d2423; border: 1px solid rgba(244, 247, 246, .55); }
.hub-topbar .me-card__ava img { width: 100%; height: 100%; object-fit: cover; }
.hub-topbar .me-card__glyph { font-size: calc(.3 * var(--t)); font-weight: 900; color: #4af2c4; }
.hub-topbar .me-card__text { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; gap: .03rem; }
.hub-topbar .me-card__name { display: flex; align-items: center; gap: .05rem; min-width: 0; color: #f2f5f4;
  font-size: calc(.17 * var(--t)); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-topbar .me-card__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* The lobby latency badge keeps one width whatever the measured value is: the number is tabular and the pill reserves
   room for four digits, so a 1 ms → 9999 ms change (or the -- placeholder) never shoves the tools to the right. */
.hub-topbar .latency-status .ping { align-items: center; flex: none; }
.hub-topbar .ping__value { display: inline-block; min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }

.me-info { display: flex; flex-direction: column; gap: .16rem; }
.me-info__card { width: 100%; }
.me-info__actions { display: flex; flex-wrap: wrap; gap: .1rem; }
.me-info__rename { display: flex; align-items: flex-end; gap: .12rem; flex-wrap: wrap; }
.me-info__field { display: flex; flex-direction: column; gap: .05rem; font-size: calc(.13 * var(--t)); color: var(--fg-2); }
.me-info__field input { width: 2.2rem; height: .4rem; padding: 0 .12rem; background: rgba(8, 13, 11, .8);
  border: 1px solid var(--line-2); border-radius: .03rem; color: var(--fg); font: inherit; }
.me-info__field--tag input { width: 1rem; letter-spacing: .1em; }
.me-info__hint { margin: 0; font-size: calc(.12 * var(--t)); color: var(--fg-3); }
.me-info__hint.is-bad { color: var(--red-300, #ff8a8a); }

/* ==========================================================================================
   the official hub, 0.3.2 / 0.3.3 (DESIGN §35.18–§35.23): only the selectors this fork's hub never had, appended
   rather than merged so that no fork rule is silently replaced by an official one of the same name.
   ========================================================================================== */
/* ==========================================================================================
   screens/lobby.css — the hub (official entry backdrop, the emblem in its radar and the title, 成就统计 / 密钥加入 /
   作战提示 at the left, the light S.W.E.E.P.报告 / 干员调配 plates at the right, the 独立模拟 / 同盟模拟 entries at the
   bottom right), and the two full-screen dialogs (the project's Modal): 选择模拟协议 (official picture, difficulty cards
   with the 已选定 stamp, 开始独立模拟 — or the room's 确认 / read-only view) and 选择同盟方式 (radar, 创建同盟 and 加入同盟
   cards). Text follows 文字大小 (calc(k * var(--t))).
   ========================================================================================== */


/* ---- hub backdrop ------------------------------------------------------------------------------------- */

/* the entries' width follows 文字大小 (2.3rem at 小; §35.18 review: at a fixed 2.3rem the names had to stop at 小's size) */

/* Korean breaks between words, not between the syllables of one (§35.18 review: 「독립 시뮬레이|션」 at 小); a word too
   long for its box still breaks rather than running out of it. The hub's own stage only: 选择模拟协议's button keeps its
   two lines (「독립 시뮬레이션 시작」 took three at 特大 in a 1024×600 window by words) */

.lobby-hub:lang(ko) .hub-stage { word-break: keep-all; overflow-wrap: break-word; }

/* Japanese never starts a line with a small kana, ー or a closing mark (§35.18 review: the tips' 「オペレ|ーター」 at 中 / 特大
   in a 1024×600 window; line-break: normal allows a break before them), as in the room */

.lobby-hub:lang(ja) .hub-stage { line-break: strict; }

/* a last line of one character: the hub's tips, the protocol dialog's paragraphs and its big button's label wrap `pretty`
   (§35.18 review of the text-fit fixes: 「比較的所要時間が短いシミュレーショ|ン」 on a phone at 特大, 「単独演算を開|始」,
   Korean 「독립 시뮬레이션 시|작」 on desktops). Scoped as in the room (room.css): WebKit's `pretty` adds lines to short
   labels, and the lobby's other dialogs were not measured with it. The dialog's button only (`.proto-foot`): the room's
   big button shares the label's class and wraps plainly — in Safari `pretty` broke its Japanese 「シミュレーション|開始」
   inside the word, 「シミュレー|ション開始」, at 小 on the phones (review of 6f34f380), as `balance` had. `pretty`:
   Chrome 117+, Safari 26+; Firefox wraps as before */

.tips__text, .proto-brief p, .proto-hint, .proto-foot .proto-start__label { text-wrap: pretty; }

/* 选择同盟方式's note breaks Japanese between phrases in Chrome 119+ (BudouX; review of 6f34f380: 「…教えてもらう|か、招待リンク…」
   at 特大 on the phones, now 「…教えて|もらうか、招待リンクを|直接開いてください」); Safari and Firefox ignore it and wrap as
   before */

.ally-recent:lang(ja) { word-break: auto-phrase; }

/* The official hub grew the top bar's ping pill to fit 大 / 特大 (§35.18 review). This fork does not: its
   `.ping` (css/components.css) is already sized by --ui, and growing it here made it taller than the buttons beside
   it (the owner's report of 2026-10-25: the latency read-out no longer lined up with the rest of the row). The room's
   own pill still grows — `.rs-clock__ping .ping` below — which is what test/ui/seat-art.test.js records. */

/* the official layers are drawn on black: `screen` keeps only their light. Their place, size and opacity below are
   eyeballed from the event video [ASSUMED: no official layout data] */

.hub-bg__glow, .hub-bg__ship { position: absolute; left: 50%; height: auto; transform: translate(-50%, -50%); mix-blend-mode: screen; }

.hub-bg__glow { top: 46%; width: 9.6rem; opacity: .2; }

.hub-bg__ship { top: 54%; width: 13.4rem; opacity: .4; animation: hub-ship 18s ease-in-out infinite alternate; }

.lobby-hub .topbar { background: linear-gradient(180deg, rgba(4, 8, 8, .85), transparent); border-bottom: 0; }


/* ---- 大厅背景与音乐 (PR #643 split 8, ui/lobbyMedia.js): the player's own picture / video over the official layers,
   darkened by its 暗度 (--own-dim) so the title and the entries stay readable; the dialog reuses the settings rows ---- */

.hub-bg__own { position: absolute; inset: 0; background: #050807; animation: hub-own-in 400ms ease-out backwards; }

.hub-bg__own img, .hub-bg__own video, .hub-bg__own canvas { display: block; width: 100%; height: 100%; object-fit: cover; }

.hub-bg__own::after { content: ''; position: absolute; inset: 0; background: rgba(5, 8, 7, var(--own-dim, .35)); }

.lmedia .modal__body { display: flex; flex-direction: column; gap: .16rem; }

.lmedia__part { display: flex; flex-direction: column; gap: .1rem; padding: .14rem .16rem; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }

.lmedia__head { display: flex; align-items: baseline; gap: .1rem; font-size: calc(.18 * var(--t)); color: var(--text-hi); }

.lmedia__now { display: flex; align-items: center; gap: .08rem; min-width: 0; font-size: calc(.16 * var(--t)); color: var(--text-md); }

.lmedia__now .icon { flex: none; width: .2rem; height: .2rem; color: var(--mint-500); }

.lmedia__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lmedia__size { flex: none; font-size: calc(.14 * var(--t)); color: var(--text-lo); }

.lmedia__btns { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }

.lmedia__btns .set-toggle { grid-column: auto; }

.lmedia__dim { padding: 0 .16rem; }

.lmedia__note { display: flex; gap: .06rem; margin: 0; font-size: calc(.15 * var(--t)); line-height: 1.6; color: var(--text-lo); }

.lmedia__note .icon { flex: none; width: .18rem; height: .18rem; margin-top: .04rem; }


/* 大厅场景 (ui/hubScene.js): four generated scenes over the official backdrop; colour tokens per scene ---------- */

[data-hub-theme="night"] {
  --sky-0: #03080a; --sky-1: #08141a; --sky-2: #12262a; --sky-3: #050909;
  --haze: rgba(92, 168, 156, .17); --cloud: rgba(140, 196, 186, .055);
  --ridge-far: #122022; --ridge-mid: #0b1516; --ridge-near: #060b0b;
  --rim: rgba(110, 226, 196, .34); --fog: rgba(54, 104, 98, .3); --beam: rgba(150, 240, 215, .1);
  --beacon: #59f4ca; --window: rgba(89, 244, 202, .7); --grid: rgba(89, 244, 202, .32);
  --mote: rgba(170, 245, 225, .7);
}

/* the official backdrop's swatch: its dark field and glow */

[data-hub-theme="official"] {
  --sky-0: #08100f; --sky-1: #0c1a1b; --sky-2: #1b3134; --sky-3: #040606;
  --ridge-far: transparent; --ridge-mid: transparent; --ridge-near: transparent; --beacon: rgba(150, 220, 230, .7);
}


.hub-scene { position: absolute; inset: 0; pointer-events: none; overflow: hidden; background: var(--sky-3); }
@media (prefers-reduced-motion: reduce){
  .hub-scene * { animation: none; }

  .hub-scene .hub-bg__mote { opacity: .3; }}

/* the scene buttons of 大厅背景与音乐 */


/* ---- hub layout: the centre spans the first row; both columns lie above it -------------------------- */

.hub-center__logo { position: relative; width: 1.3rem; height: auto; filter: drop-shadow(0 0 .12rem rgba(210, 255, 240, .25)); }

.hub-center__title em { font-style: normal; color: var(--mint-400); }

.hub-center__title--latin { font-family: var(--font-display); letter-spacing: .04em; text-transform: uppercase; }

/* the title is centred over the whole stage: it keeps clear of the side columns (4rem and its gap each side), and the
   latin one — 「STRONGHOLD PROTOCOL: ALLIANCE」, 20em of the display font — is .46 × --t while it fits on one line
   inside that, (100vw − 9.52rem) / 20.2 (§35.18 review: at .56rem it reached under the left column's tips in English, at
   大 / 特大 in 800–1280 px windows; pinned at .46rem it no longer followed 文字大小). [ASSUMED] the .46 */

.hub-center__title--latin { font-size: min(calc(.46 * var(--t)), calc((100vw - 9.52rem) / 20.2)); }

/* the radar rings around the emblem (original drawing) */


/* ---- left column: 成就统计, 密钥加入, 作战提示 ------------------------------------------------------------ */

/* 成就统计 (#643's top-left card, from the event video): a dusk scene with the emblem and the trophy medal, the label strip
   with the LV under it */

.hub-ach__mark { position: relative; z-index: 1; display: grid; place-items: center; }

.hub-ach__mark .emblem { margin: 0; gap: .06rem; animation: none; }

.hub-ach__mark .emblem__svg { width: .52rem; height: .56rem; filter: drop-shadow(0 0 .04rem rgba(0, 0, 0, .6)); }

.hub-ach__mark .emblem__svg circle { fill: #15110c; animation: none; }

.hub-ach__mark .emblem__svg circle.is-accent { fill: #2cf0b8; }

.hub-ach__mark .emblem__bracket { width: .07rem; height: .66rem; border-width: 1px; border-color: rgba(20, 16, 10, .55); }

.hub-ach__medal { width: .44rem; height: .44rem; object-fit: contain; }

.hub-tile:hover, .hub-tile:focus-visible { background: rgba(24, 40, 36, .9); border-color: var(--mint-a35); }

.hub-tile__icon .icon { width: .24rem; height: .24rem; }


/* ---- right column: light plates with bracket marks (S.W.E.E.P.报告, 干员调配 = loadout.js's LoadoutButton) --------- */

.lobby-hub .hub-plate {
  --pl-ink: #222b28;
  --bk-c: var(--mint-400);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .14rem;
  width: 100%;
  height: auto;
  min-height: .7rem;
  min-width: 0;
  padding: .04rem .22rem .04rem .2rem;
  font: inherit;
  font-size: calc(.2 * var(--t));
  letter-spacing: .04em;
  color: #111816;
  text-align: left;
  cursor: pointer;
  background:
    linear-gradient(var(--pl-ink), var(--pl-ink)) left .07rem center / 2px 54% no-repeat,
    linear-gradient(var(--pl-ink), var(--pl-ink)) left .07rem top 23% / .06rem 2px no-repeat,
    linear-gradient(var(--pl-ink), var(--pl-ink)) left .07rem bottom 23% / .06rem 2px no-repeat,
    linear-gradient(var(--pl-ink), var(--pl-ink)) right .07rem center / 2px 54% no-repeat,
    linear-gradient(var(--pl-ink), var(--pl-ink)) right .07rem top 23% / .06rem 2px no-repeat,
    linear-gradient(var(--pl-ink), var(--pl-ink)) right .07rem bottom 23% / .06rem 2px no-repeat,
    linear-gradient(180deg, #e8edea, #c6cfcb);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 .05rem .18rem rgba(0, 0, 0, .5), inset 0 -2px 0 rgba(0, 0, 0, .14);
}

.lobby-hub .hub-plate:not(:disabled):hover { border-color: #fff; box-shadow: 0 .05rem .22rem rgba(0, 0, 0, .55), 0 0 .16rem rgba(78, 216, 175, .3); filter: brightness(1.05); }

.lobby-hub .hub-plate:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 2px; }

.hub-plate__glyph, .lobby-hub .hub-plate .lo-entry__icon, .lobby-hub .hub-plate > .btn__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: .46rem;
  height: .46rem;
  padding: .07rem;
  box-sizing: border-box;
  color: var(--mint-400);
  background: #182120;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* (a label too long for its plate wraps beside its glyph and the plate grows, rather than an ellipsis — §35.18 review:
   Japanese S.W.E.E.P.レポート beside its tag at 特大 in 800–1280 px windows. It takes the row's free width, at least its
   longest word, so only the tag drops under it when even that does not fit) */

.hub-plate__label, .lobby-hub .hub-plate .btn__label { flex: 1 1 0; min-width: min-content; font-weight: 900; letter-spacing: .04em; line-height: 1.15; white-space: normal; color: #111816; }

.lobby-hub .hub-plate .lo-entry__n { margin-left: auto; }

/* 成就统计 as a plate: only on short screens, where the left column with its card gives way (see the media block) */

.lobby-hub .hub-plate--ach { display: none; }

.hub-plate--ach .hub-plate__glyph svg { fill: currentColor; }


/* ---- entries (独立模拟 / 同盟模拟), bottom right ----------------------------------------------------------- */

/* (the card, the line above it, the tips' head and the 成就统计 card's label grow or wrap rather than cut their text at
   大 / 特大 in a small window — §35.18 review; the trophy count under the medal stops at .15rem, 大's size [ASSUMED]) */

/* (the two cards share a height: the taller one's, their text at the bottom) */

.hub-entry-wrap:nth-child(2) { animation-delay: 60ms; }

.hub-entry__group .icon { flex: none; width: .16rem; height: .16rem; color: var(--mint-400); }

.hub-entry__long { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.hub-entry__short { display: none; }

/* Narrow desktop windows keep the full descriptions (phones have their own short labels below).
   [ASSUMED] A shared two-line minimum keeps both cards level when only one description wraps. */
@media (max-width: 900px) and (min-height: 521px){
  .hub-entry__long { white-space: normal; overflow: visible; text-overflow: clip; }}

.hub-entry:hover, .hub-entry:focus-visible { transform: translateY(-.04rem); border-color: var(--mint-400); box-shadow: 0 .08rem .3rem rgba(0, 0, 0, .55), 0 0 .2rem var(--mint-a20); }

.hub-entry:active { transform: translateY(1px); }

.hub-entry__icon .icon { width: calc(.42 * var(--t)); height: calc(.42 * var(--t)); }

/* the card, its icon and its text follow 文字大小 together (2.3 × 1.34 --t, the icon .42 --t), as at 小; the text stays
   below the icon — the card's top padding is the icon's .12rem offset, its height and a gap — so a long name or the
   decorative line grows the card rather than running under it (§35.18 review: 「ALLIANCE SIMULATION」 ran under the
   people icon in English, Korean names under it at 大 / 特大; a padding beside it instead wrapped the line in every
   language, Chinese 「ALLIANCE / SIMULATION」 at 小, which never reached the icon). A short card keeps its min-height */

/* the name wraps between words (§35.18 review: on one line English 「Solo Simulation」 / 「Team Simulation」 ran 25–40 px
   past the 2.3rem card at 小 in every window and 84–100 px at 特大, the card cutting it); 「Simulation」 alone is ~6.2em,
   and the card (2.3 × --t) keeps ~1.98 × --t inside for the .3 × --t name */

/* 同盟模拟, the main way to play: bright */

.hub-entry--coop { background: linear-gradient(160deg, var(--mint-500), #1f8f72); color: #04140f; border-color: var(--mint-400); }

.hub-entry--coop .hub-entry__en { color: rgba(4, 20, 15, .75); }

.hub-entry--coop .hub-entry__icon { color: rgba(4, 20, 15, .25); }

.hub-entry--coop .hub-entry__corner { background: linear-gradient(135deg, transparent 50%, #e8fff7 50%); }


/* ---- tips -------------------------------------------------------------------------------------------- */

/* the count and its arrows move to a line of their own, together, when the head is too narrow for them (§35.18 review) */

.tips__pager { display: inline-flex; align-items: center; gap: .1rem; margin-left: auto; }


/* ---- the two full-screen dialogs (Modal .proto / .ally) --------------------------------------------- */

.modal.proto-veil { padding: 0; background: #0b0c0c; -webkit-backdrop-filter: none; backdrop-filter: none; }

.modal__box.proto, .modal__box.ally {
  position: fixed;
  inset: 0;
  width: auto;
  max-height: none;
  padding: var(--sa-t, 0px) var(--sa-r, 0px) var(--sa-b, 0px) var(--sa-l, 0px);
  color: #eef0ef;
  background: #0b0c0c;
  border: 0;
  box-shadow: none;
  overscroll-behavior: contain;
  animation: proto-in 200ms var(--ease-out) backwards;
}

.modal__box.proto::after, .modal__box.proto > .modal__stripe, .modal__box.ally::after, .modal__box.ally > .modal__stripe { display: none; }

.modal__box.proto > .modal__body, .modal__box.ally > .modal__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; color: inherit; }

.proto__body, .ally__body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.proto-top, .proto-body { position: relative; }

.proto-back:hover, .proto-back:focus-visible { border-color: rgba(255, 255, 255, .35); }

.proto-title .modal__title { margin: 0; font-size: calc(.36 * var(--t)); font-weight: 900; letter-spacing: .06em; color: #eef0ef; }

.proto-title__mode .icon { width: 1.1em; height: 1.1em; }


/* the cards' column 5.6rem, at least 300 px (§35.18 review: in a window whose 1rem is under 54 px — 960×540, 1100×530,
   800×600 — the px floors of the glyph and the 文字大小 made 5.6rem too narrow for English 「Standard Simulation」 /
   「Ultimate Simulation」 on one line, and the unselected cards' names ended in an ellipsis), never past 46vw. [ASSUMED] the
   floor */


/* the official picture of the selected difficulty, with its brief at the bottom left */

/* the picture fills the column (as #643's drawn scene did: from a little above the cards down to the brief) */

.proto__pic { position: absolute; inset: -.5rem -1.8rem .9rem -.3rem; display: grid; place-items: center; min-height: 0; animation: proto-pic var(--t-slow) var(--ease-out); }

.proto__art {
  width: 100%;
  height: 100%;
  max-width: 9.4rem; /* the art is 427 × 332: up to about 2.2× before it turns soft */
  max-height: 7.3rem;
  object-fit: contain;
  filter: drop-shadow(0 0 .2rem var(--d-color));
  filter: drop-shadow(0 0 .2rem color-mix(in srgb, var(--d-color) 45%, transparent));
}

.proto__glyph { width: 2.2rem; height: 2.2rem; color: var(--d-color); opacity: .8; filter: drop-shadow(0 0 .2rem var(--d-color)); }


/* the scene (ui/protocolScene.js, PR #643 + video 5:00–5:16): the official ship on a survey grid between two squares of
   defenders, the cable with a light running down it; it reaches under the cards like the event's. A new difficulty
   remounts it: dark first, then up in the new colour. */
@keyframes ps-in{ 35% { opacity: .35; filter: brightness(.3); }}

.ps-ship image { filter: drop-shadow(0 0 10px var(--d-color)); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--d-color) 55%, transparent)); }

.ps-cable__pulse { fill: none; stroke: #fff6d8; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 90 1200; stroke-dashoffset: 90;
  filter: drop-shadow(0 0 6px var(--d-color)); animation: ps-pulse 2.6s cubic-bezier(.5, 0, .7, 1) 400ms infinite; }

.ps-call rect.ps-call__icon { fill: currentColor; fill-opacity: .25; }

.ps-call { animation: ps-fig 420ms var(--ease-out) 420ms backwards; }


/* the difficulty cards: the chosen one slides out with a glow and the 已选定 stamp; centred while they fit (auto margins, so
   a list taller than the column still scrolls from its top). The gaps and pads a little tighter than #643's (.14rem, .1rem
   and .1 / .11rem) so the full cards fit at 小 in a 16:9 window (they were 2–26 px too tall at 1280x720 – 1920x1080:
   §35.18's leftover). [ASSUMED] the spacing */

.proto-list > :first-child { margin-top: auto; }

.proto-list > :last-child { margin-bottom: auto; }

.pcard:hover:not(.is-on), .pcard:focus-visible:not(.is-on) { border-color: #7b7f81; }

/* the room's read-only view (another doctor's: the host chooses): shown, not chosen */

.pcard:disabled { cursor: default; }

.pcard:disabled:hover:not(.is-on) { border-color: #55585a; }

.pcard__head, .pcard__desc, .pcard__effects, .pcard__meta { position: relative; }

.pcard.is-on .pcard__head, .pcard.is-on .pcard__desc, .pcard.is-on .pcard__effects, .pcard.is-on .pcard__meta { padding-right: max(1.3rem, 32px, calc(70px * var(--sp-ui, 1))); }

.pcard__stage { display: inline-flex; align-items: center; gap: .04rem; }

.pcard__stage .icon { width: 1.1em; height: 1.1em; }


/* the foot: the test-room box, the hint, 开始独立模拟 / 创建同盟 */

.proto-hint .icon { flex: none; width: 1.1em; height: 1.1em; }

.proto-hint--ro { min-height: max(.64rem, 32px, calc(38px * var(--sp-ui, 1))); font-size: calc(.18 * var(--t)); color: #b9bfbd; }

.proto-start:hover:not(:disabled), .proto-start:focus-visible { filter: brightness(1.07); }

.proto-start:focus-visible { outline: 2px solid #eef0ef; outline-offset: 2px; }

/* 选择模拟协议's own button (.proto-foot; the room's GoButton shares the rules above and makes its own choice in
   css/screens/room.css — §35.18 review: these rules once reached it too): the label wraps onto a second line (the button
   grows: min-height above) rather than being cut, and stops at .46rem — 大's size — on a screen taller than 520 px, the
   mark's rook at .4rem (§35.18's leftover: English 开始独立模拟 was cut at every desktop size, even at 小 at 1440x900;
   the short-screen block has its own caps). [ASSUMED] the label's caps */

.proto-foot .proto-start__label { flex: 1 1 auto; padding-right: 8%; font-size: min(calc(.4 * var(--t)), .46rem); white-space: normal; line-height: 1.1; }

.proto-foot .proto-start__rook { font-size: min(calc(.36 * var(--t)), .4rem); }


/* ---- 选择同盟方式: the radar, the 创建同盟 / 加入同盟 cards -------------------------------------------------- */

.ally-guide:hover, .ally-guide:focus-visible { filter: brightness(1.06); }

/* centred safely: the auto margins give way when the column is taller than its space (justify-content: center would
   push it past both ends), so a short screen's scroll (below) starts at 创建同盟 */

.ally-side > :first-child { margin-top: auto; }

.ally-side > :last-child { margin-bottom: auto; }

button.ally-card:hover, button.ally-card:focus-visible { border-color: rgba(93, 240, 198, .6); }

/* the difficulty line wraps at the bar's right rather than ending in an ellipsis (§35.51: English 「Difficulty: Standard
   Simulat…」 at 1280–1440 px, Japanese at 1024×600 特大). It keeps a column of at least 10em beside the name, else it
   takes a row of its own under the name and the bar grows (§35.51 review: squeezed into the 96 px the name left in
   English at 特大 on 1024×600, six lines ran out of the 42 px bar); Korean breaks between words only (the review:
   「시뮬레이|션」 once balanced), Japanese by its line-breaking rules */

.ally-card--create .ally-card__bar { flex-wrap: wrap; align-content: center; row-gap: 1px; height: auto; min-height: max(.74rem, 32px, calc(42px * var(--sp-ui, 1)));
  padding-top: 4px; padding-bottom: 4px; }

.ally-card__bar small:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }

.ally-card__bar small:lang(ja) { line-break: strict; }

button.ally-card:disabled .ally-card__bar { filter: grayscale(.5) brightness(.8); }

/* the test-room box under 创建同盟 (test mode only) */

.ally-test { padding: 0 .2rem; }

.ally-card__bar--join:hover:not(:disabled), .ally-card__bar--join:focus-visible { filter: brightness(1.06); }

/* the key field: the project's TextField (.field / .field__box / .field__input) restyled as the event's grey bar, with
   观战 beside it inside the same bar */

.ally-key:focus-within { border-color: #ff9a3c; }

.ally-key .field { flex: 1 1 auto; height: 100%; gap: 0; }

.ally-key .field__box { height: 100%; padding: 0; gap: .1rem; background: none; border: 0; box-shadow: none; }

.ally-key .field__box::after { display: none; }

.ally-key .field__icon { flex: none; width: max(.24rem, 15px); height: max(.24rem, 15px); color: #c9cecc; }

.ally-key .field__box:focus-within .field__icon { color: #ff9a3c; }

.ally-key__spec:hover:not(:disabled), .ally-key__spec:focus-visible { border-color: rgba(255, 255, 255, .5); }

.ally-key__spec:disabled { opacity: .45; cursor: default; }


/* ---- 选择模拟协议's cards when they do not fit their column (screens/lobby.js pickCardFit: data-fit), above 520 px tall --
   (§35.18's leftover there: at 大 / 特大, in a small window or a long language the list ran under 开始独立模拟 with 终极模拟
   out of view.) 'brief': the description only in the brief at the left, where the chosen difficulty's already is;
   'names': a line each, and the brief adds the chosen difficulty's effects and rounds. At both, the chosen card's name
   ends in an ellipsis beside the stamp should a long language need it (the brief names it in full); the names stop at
   .36rem (base rule: at 特大 in a 1024 px window English ran past the cards). The short-screen block below has its own
   one-line cards. [ASSUMED] the levels and the sizes */

.proto-brief__more { display: none; }
@media (min-height: 521px){
  .proto__body[data-fit="brief"] .pcard__desc,
  .proto__body[data-fit="names"] .pcard__desc, .proto__body[data-fit="names"] .pcard__effects, .proto__body[data-fit="names"] .pcard__meta { display: none; }

  .proto__body[data-fit="names"] .pcard { padding-top: .08rem; padding-bottom: .08rem; }

  .proto__body[data-fit="brief"] .pcard__head, .proto__body[data-fit="names"] .pcard__head { min-width: 0; }

  .proto__body[data-fit="brief"] .pcard__glyph, .proto__body[data-fit="names"] .pcard__glyph { flex: none; }

  .proto__body[data-fit="brief"] .pcard__name, .proto__body[data-fit="names"] .pcard__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }

  .proto__body[data-fit="names"] .pcard.is-on .pcard__head { padding-right: max(.9rem, calc(46px * var(--sp-ui, 1))); }

  .proto__body[data-fit="names"] .pcard.is-on .pcard__stamp { right: .1rem; width: max(.8rem, 32px, calc(40px * var(--sp-ui, 1))); height: max(.64rem, 32px, calc(34px * var(--sp-ui, 1))); }

  .proto__body[data-fit="names"] .pcard.is-on .pcard__tick { width: max(.4rem, 22px); height: max(.4rem, 22px); }

  .proto__body[data-fit="names"] .pcard__ok { display: none; }

  .proto__body[data-fit="names"] .proto-brief__more { display: flex; flex-direction: column; gap: .04rem; margin-top: .06rem; padding-top: .06rem; border-top: 1px solid rgba(255, 255, 255, .18); }

  .proto-brief__effects { display: flex; flex-direction: column; font-size: calc(.16 * var(--t)); line-height: 1.4; color: #e9eceb; }

  .proto-brief__effects span::before { content: '·'; margin-right: .06rem; }

  .proto-brief__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .04rem .14rem; font-size: calc(.13 * var(--t)); color: #7f8583; }

  .proto-brief__meta b { color: #cfd3d1; }}


/* ---- narrow windows: the dialogs stack their halves ------------------------------------------------- */
@media (max-aspect-ratio: 1/1){
  .proto__pic { inset: 0 0 .9rem; }

  /* the list keeps the .5rem the chosen card slides into (§35.51: at .1rem its -.44rem ran past the screen's left edge) */

  .proto-foot { padding-left: .1rem; }

  /* the cards and the button span the width here: the caps for the landscape column (a 5.6rem column) give way */

  .proto-foot .proto-start__label { font-size: calc(.4 * var(--t)); }

  .proto-foot .proto-start__rook { font-size: calc(.36 * var(--t)); }}


/* ---- short landscape phones (≤ 520 CSS px tall) ---------------------------------------------------------- */

/* The hub drops its left column and the radar; the dialogs keep the four cards and the button in view without scrolling
   at every 文字大小 (the cards keep only their names, the selected difficulty's description moves to the brief). */
@media (max-height: 520px){
  /* the entries span the screen's width here: at least 128 px each, so a wrapped English name has a line of its own
     (at 2.1rem, 84 px, 「Simulation」 was 95 px at 小). [ASSUMED] the width */

  .hub-side, .hub-radar { display: none; }

  .hub-center__logo { width: .9rem; }

  .hub-center__mark .emblem__svg { width: .9rem; height: 1rem; }

  .lobby-hub .hub-plate { min-height: max(.7rem, 32px, calc(40px * var(--sp-ui, 1))); }

  .lobby-hub .hub-plate--ach { display: flex; }

  /* (here the hub's height is the limit: a top padding for the icon made the English and Korean cards so tall at 大 /
     特大 that the line above them ran into the title on a 640 / 740 px phone. The decorative line keeps clear of the icon
     beside it instead, .44rem — at 小 it stays on one line there in every language) */

  .hub-entry__icon .icon { width: .42rem; height: .42rem; }

  /* 选择模拟协议 (§35.18's leftover: at 文字大小 中 and above the four cards ran under 开始独立模拟 — 终极模拟 out of sight,
     the label cut — in every language, 844×390 and smaller): a wider column (7.4rem as 选择同盟方式's, 296 px here), the cards one
     line each — the name, 16–20 px, an ellipsis in the chosen card of a long language (the brief names it in full) —, the
     chosen difficulty's description in the brief at the left (11–13 px, the event's own place for it, as on a desktop),
     the header and the label capped (below) and the label wrapping onto a second line rather than being cut. The list
     still scrolls should a pack's names not fit. [ASSUMED] every cap */

  /* the column and the brief keep their unscaled widths under 界面大小 (÷ --sp-ui): the names' 16 px floor, the brief's
     11 px floor and the px paddings and stamp space do not shrink, so at 75 % a 222 px column cut 'Perilous Simulation'
     in English and the brief broke a Korean word (DESIGN §35.47) */

  .proto__pic { inset: 0 0 1.6rem; }

  .pcard__desc, .pcard__effects, .pcard__meta { display: none; }

  .pcard.is-on .pcard__head { padding-right: 46px; }

  .pcard.is-on .pcard__tick { width: 22px; height: 22px; }

  /* a column still taller than its space (a long language, the recent keys, the test-room box) scrolls rather than being
     cut off; the 4 px pad on the three other sides keeps the focus ring and the shadows inside the clip */

  /* 1rem is ~40 px here: the text gets its own sizes (still following 文字大小) */

  /* the plates' labels, the entries' names and their decorative English capped so they stay whole (§35.18 review: at 大 /
     特大 the plates ended in an ellipsis and the entries cut both lines); each cap is its size at 中 and grows a pixel a
     step above it (--t-step, theme.css), the entries 7 px wider a step for the name's longest word (「Simulation」 ~6.2em).
     [ASSUMED] the caps */

  .lobby-hub .hub-plate { font-size: min(calc(.3 * var(--t)), calc(18px + var(--t-step))); }

  /* 同盟模拟's line keeps only 「1–4 名博士」 here (§35.51: the whole line, nowrap, ran 81–320 px past its entry at 特大 —
     two to four lines if it wrapped; the AI teammates are the room's to show) */

  .hub-entry__long { display: none; }

  .hub-entry__short { display: inline; }

  .proto-title .modal__title { font-size: min(calc(.46 * var(--t)), 24px); white-space: nowrap; }

  .proto-title__mode, .proto-title__mode i { font-size: min(calc(.24 * var(--t)), 16px); }

  /* the mode line stays one line at a big 文字大小 in a long language (en 特大 broke 「Team Simulation」 in two, the
     header growing by a line the column needs): the decorative ALLIANCE / SOLO SIMULATION stops at 15 px [ASSUMED] and
     drops under as a whole if it still does not fit */

  .proto-foot .proto-start__label { font-size: min(calc(.5 * var(--t)), 20px); }

  .proto-foot .proto-start__rook { font-size: min(calc(.36 * var(--t)), 16px); }

  .proto-foot .proto-start__mark small { font-size: min(calc(.08 * var(--t)), 6px); }

  /* the bars' names 16–26 px here ([ASSUMED] the cap: en 「Create Alliance」 on its row at 特大, the column on the screen) */

  /* 创建同盟 keeps its difficulty line (§35.18's leftover: it was hidden here): two columns, the icon and the name on the
     first row, the line under the name on the second, wrapping rather than cut short; 11–14 px, [ASSUMED] the cap */

  .ally-card--create .ally-card__bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; row-gap: 1px; height: auto;
    min-height: max(.74rem, 32px, calc(42px * var(--sp-ui, 1))); padding-top: 5px; padding-bottom: 5px; }

  .ally-card--create .ally-card__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }

  .ally-card--create .ally-card__bar small { grid-column: 2; margin-left: 0; overflow: visible; white-space: normal; text-align: left; font-size: clamp(11px, calc(.28 * var(--t)), 14px); line-height: 1.3; }

  /* the key field's placeholder fits beside 观战 (§35.18's leftover: clipped at 特大 in English and Japanese): the short
     text (screens/lobby.js AllianceSelect `short`), 11–13 px, and 观战 at most 14 px; an ellipsis should a pack's
     name still be longer. [ASSUMED] the caps */

  .ally-key input::placeholder { font-size: clamp(11px, calc(.26 * var(--t)), 13px); }

  /* the empty field takes the placeholder's size, so the placeholder sits in the middle like the key will (§35.51: on the
     28 px key's baseline it sat 6–9 px below the key icon and 观战 at 特大) */

  .ally-key input:placeholder-shown { font-size: clamp(11px, calc(.26 * var(--t)), 13px); }
 /* [ASSUMED] the cap, like the difficulty line's */}

/* ---- 转场 (PR #643, the event's screen changes): a screen comes up from black, its panels slide in one after another ---- */

.lobby-hub, .modal__box.proto, .modal__box.ally { --tr-ease: cubic-bezier(.16, .84, .3, 1); }

/* the hub */
 /* opacity only: its dialogs are fixed */

.lobby-hub .hub-center { animation: tr-zoom 600ms var(--tr-ease) 140ms backwards; }

.lobby-hub .hub-side { animation: tr-left 480ms var(--tr-ease) 220ms backwards; }

.lobby-hub .hub-right { animation: tr-right 480ms var(--tr-ease) 260ms backwards; }

/* 选择模拟协议 / 选择同盟方式: from black, then the title, the stage and the cards */

.modal__box.proto, .modal__box.ally { animation: tr-veil 150ms linear backwards; }

/* the diamond at the bottom while it comes up */

.proto__body::after, .ally__body::after { content: ''; position: absolute; left: 50%; bottom: .5rem; z-index: 9; width: .3rem; height: .3rem; pointer-events: none; opacity: 0;
  border: 2px solid rgba(223, 230, 226, .55); box-shadow: inset 0 0 0 3px #0a0b0b, inset 0 0 0 5px rgba(223, 230, 226, .3); animation: tr-diamond 720ms ease-out 60ms both; }

/* the stamp's ring is drawn each time a difficulty is chosen */
@media (prefers-reduced-motion: reduce){
  .hub-bg__ship, .hub-center, .hub-entry-wrap, .hub-radar__sweep, .proto__pic, .modal__box.proto, .modal__box.ally, .pcard.is-on .pcard__stamp,
  .mf-radar__sweep, .mf-radar__blip, .mf-blk.is-lit, .hub-bg__own, .lobby-hub .hub-bg, .lobby-hub > .topbar, .lobby-hub .hub-center, .lobby-hub .hub-side,
  .lobby-hub .hub-right, .hub-entries .hub-entry-wrap, .proto__bg, .proto-top, .proto-title, .proto-stage, .ally-stage, .proto-list .pcard, .proto-foot,
  .ally-card--create, .ally-card--join, .ally-guide, .pcard.is-on .pcard__ring path, .ps, .ps-fig, .ps-spike, .ps-call, .ps-beacon, .ps-scan { animation: none; }

  .ps-cable__pulse { display: none; }

  .proto__body::after, .ally__body::after { display: none; }}


/* official versions (DESIGN §35.23): the version under the title, the cards' wait while a version's data loads */

.hub-center__ver { position: relative; margin-top: .04rem; font-size: calc(.22 * var(--t)); font-weight: 700; letter-spacing: .08em; color: #9fd3ff; text-shadow: 0 1px .08rem rgba(0, 0, 0, .85); overflow-wrap: anywhere; }

.proto-list__wait { display: flex; align-items: center; gap: .08rem; margin: 0; color: var(--text-lo); font-size: calc(.15 * var(--t)); }

.proto-list__wait.is-failed { flex-wrap: wrap; color: var(--amber); }

.proto-list__wait.is-failed .icon { flex: none; width: 1.1em; height: 1.1em; }

/* ==========================================================================================
   the fork's own room rules that used to live in screens/room.css, carried over when that file became the official
   room (0.3.2): the legacy seat markup the fork's cards extend (`seat` + `rseat`), its 添加 AI 队友 / 添加精英干员
   column (`rseat__adds`), and the invite block.
   ========================================================================================== */
/* ==========================================================================================
   screens/room.css — room/waiting screen: invite key, 4 seat cards, bottom action bar.
   ========================================================================================== */


.room-screen .topbar { height: 1.36rem; }

.room-ping { display: flex; flex-direction: column; align-items: flex-start; gap: .04rem; }


/* ---- invite key ---------------------------------------------------------------------------------------- */

.invite {
  --bk-c: var(--mint-500);
  display: grid;
  grid-template-columns: auto auto;
  column-gap: .2rem;
  row-gap: .06rem;
  align-items: center;
  padding: .1rem .16rem .12rem;
  background: rgba(0, 0, 0, .38);
  border: 1px solid var(--line);
}

.invite__label { grid-column: 1 / -1; display: flex; align-items: center; gap: .07rem; font-size: max(calc(.14 * var(--t)), 12px); color: var(--text-lo); }

.invite__label .icon { width: .16rem; height: .16rem; color: var(--mint-500); }

.invite__code { display: flex; gap: .06rem; }

.invite__code span {
  display: grid;
  place-items: center;
  width: .46rem;
  height: .58rem;
  background: linear-gradient(180deg, rgba(78, 216, 175, .1), rgba(78, 216, 175, .02));
  border-bottom: 2px solid var(--mint-600);
  color: var(--mint-400);
  font-size: calc(.44 * var(--t));
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 .16rem rgba(23, 249, 183, .45);
}

.invite__btns { display: flex; flex-direction: column; gap: .06rem; }

.solo-note { display: flex; flex-direction: column; align-items: flex-end; gap: .03rem; font-size: max(calc(.16 * var(--t)), 12px); color: var(--text-lo); }


/* ---- seats ------------------------------------------------------------------------------------------------ */

.seats {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 3.8rem));
  grid-template-rows: minmax(0, 6rem);
  justify-content: center;
  align-content: center;
  gap: .3rem;
  padding: .3rem .6rem .24rem;
}

.seats--solo { grid-template-columns: 3.8rem minmax(0, 6.4rem); }

.room-screen--expanded .ready-count__icons { display: none; }

.room-screen--expanded .room-bar__difficulty { flex-wrap: wrap; gap: 8px; }

.room-screen--expanded .ready-count { flex-wrap: wrap; justify-content: center; }

.seats.seats--expanded { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(208px, max-content); align-content: start; gap: 12px; padding: 16px; overflow-y: auto; }

.seats--expanded .seat { padding: 10px; gap: 4px; animation-delay: 0ms; }

.seats--expanded .seat__head { gap: 4px; }

.seats--expanded .seat__head > .micro { display: none; }

.seats--expanded .seat__no { font-size: 15px; }

.seats--expanded .seat__host { font-size: 11px; }

.seats--expanded .seat__art { min-height: 64px; margin: 0; }

.seats--expanded .seat__art .avatar { --av: 64px; }

.seats--expanded .seat__name { font-size: 15px; max-width: 100%; }

.seats--expanded .seat > .micro { font-size: 10px; }

.seats--expanded .seat__wait { font-size: 13px; }

.seats--expanded .seat__art--empty > .micro { display: none; }

.seats--expanded .seat__radar { width: 48px; height: 48px; }

.seats--expanded .seat__foot { min-height: 36px; padding-top: 6px; margin-top: 2px; }

.seats--expanded .seat__foot .btn { min-height: 36px; height: auto; font-size: 12px; padding-inline: 6px; letter-spacing: 0; }

.seats--expanded .seat__state { font-size: 13px; }

.seats--expanded .seat__state .icon { width: 16px; height: 16px; }
@media (max-width: 1100px){ .seats.seats--expanded { grid-template-columns: repeat(4, minmax(0, 1fr)); }}
@media (max-width: 700px){ .seats.seats--expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }}


.seat {
  --bk-c: var(--line-3);
  --bk-l: .18rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .07rem;
  height: 100%;
  min-height: 0;
  padding: .16rem .2rem .18rem;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(29, 35, 32, .95), rgba(11, 14, 13, .97));
  border: 1px solid var(--line);
  box-shadow: 0 .14rem .34rem rgba(0, 0, 0, .4);
  transition: border-color var(--t-med), box-shadow var(--t-med);
  animation: seat-in var(--t-slow) var(--ease-out) backwards;
  animation-delay: calc(var(--seat-i, 0) * 60ms);
}

.seat::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--line-2);
  transition: background var(--t-med), box-shadow var(--t-med);
}

.seat__head { align-self: stretch; display: flex; align-items: center; gap: .1rem; }

.seat__no { font-size: max(calc(.22 * var(--t)), 14px); font-weight: 700; color: var(--text-md); padding-left: .08rem; border-left: 3px solid var(--line-3); line-height: 1.1; }

.seat__host {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .04rem;
  padding: .02rem .09rem;
  background: var(--gold);
  color: #1d1400;
  font-size: max(calc(.13 * var(--t)), 11px);
  font-weight: 700;
}

.seat__host .icon { width: .15rem; height: .15rem; }

.seat__art {
  position: relative;
  flex: 1;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .08rem;
  margin: .06rem 0 .04rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(78, 216, 175, .08), transparent 62%),
    linear-gradient(rgba(78, 216, 175, .04) 1px, transparent 1px) 0 0 / .3rem .3rem,
    linear-gradient(90deg, rgba(78, 216, 175, .04) 1px, transparent 1px) 0 0 / .3rem .3rem,
    #0b0e0d;
  border: 1px solid rgba(255, 255, 255, .04);
}

.seat__stripes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: .14rem;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .06) 0 .05rem, transparent .05rem .1rem);
}

.seat__art .avatar { --av: 2.1rem; }

.seat__bot-label {
  display: flex;
  align-items: center;
  gap: .05rem;
  padding: .02rem .1rem;
  background: rgba(159, 212, 255, .1);
  border: 1px solid rgba(159, 212, 255, .35);
  color: var(--ice);
  font-size: max(calc(.14 * var(--t)), 12px);
  font-weight: 700;
}

.seat__bot-label .icon { width: .16rem; height: .16rem; }

.seat__who { display: flex; align-items: center; gap: .08rem; max-width: 100%; }

.seat__foot {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-height: .46rem;
  margin-top: .06rem;
  padding-top: .1rem;
  border-top: 1px solid var(--line);
}

.seat__foot .tt-anchor { position: absolute; right: .14rem; bottom: .14rem; }

.seat__state { display: flex; align-items: center; gap: .06rem; font-size: max(calc(.18 * var(--t)), 13px); font-weight: 700; letter-spacing: .06em; }

.seat__state .icon { width: .22rem; height: .22rem; }

.seat__state--ready { color: var(--mint-400); }

.seat__state--waiting { color: var(--text-lo); }

.seat__state--offline { color: var(--orange-hi); }

.seat__state--host { color: var(--gold-2); }

/* a room with gameplay plugins (DESIGN §32.6): whether the seat's page has loaded and checked the room's content */

.seat__content { display: block; padding: 0 .12rem; font-size: calc(.13 * var(--t)); color: var(--text-lo); letter-spacing: .04em; }

.room-mode { margin-left: .1rem; padding: 0 .08rem; border: 1px solid rgba(255, 106, 61, .6); color: #ff8a5c; font-size: calc(.16 * var(--t)); vertical-align: middle; }


.seat.is-ready { --bk-c: var(--mint-500); border-color: var(--mint-800); }

.seat.is-ready::before { background: var(--mint-500); box-shadow: 0 0 .12rem rgba(23, 249, 183, .6); }

.seat.is-host .seat__no { border-left-color: var(--gold); }

.seat.is-me { box-shadow: 0 0 0 1px rgba(78, 216, 175, .28), 0 0 .44rem rgba(23, 249, 183, .12), 0 .14rem .34rem rgba(0, 0, 0, .4); }

.seat.is-me .seat__no { color: var(--mint-400); }

.seat.is-offline::before { background: var(--orange); }

.seat.is-bot .seat__art { background:
    radial-gradient(circle at 50% 42%, rgba(159, 212, 255, .08), transparent 62%),
    linear-gradient(rgba(159, 212, 255, .04) 1px, transparent 1px) 0 0 / .3rem .3rem,
    linear-gradient(90deg, rgba(159, 212, 255, .04) 1px, transparent 1px) 0 0 / .3rem .3rem,
    #0b0e10; }


.seat--empty { background: rgba(10, 13, 12, .5); border-style: dashed; border-color: var(--line-2); box-shadow: none; }

.seat--empty .seat__art { background: transparent; border: 0; }

.seat__radar {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 .2rem, rgba(78, 216, 175, .14) .2rem .21rem),
    /* bright edge at 100% (== 0deg) so it leads the clockwise rotation and the glow trails behind
       (conic-gradient angles run clockwise from the top). */
    conic-gradient(from 0deg, transparent 0 75%, rgba(23, 249, 183, .2) 100%);
  -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 71%);
  mask-image: radial-gradient(circle, #000 60%, transparent 71%);
  animation: radar-sweep 4s linear infinite;
}

.seat__wait { font-size: max(calc(.2 * var(--t)), 14px); color: var(--text-lo); letter-spacing: .08em; }

.seat--empty .seat__foot { border-top-style: dashed; }


.solo-brief {
  --bk-c: var(--mint-500);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: .14rem;
  height: 100%;
  padding: .34rem .4rem;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(24, 29, 27, .92), rgba(11, 14, 13, .95));
  border: 1px solid var(--line);
  animation: seat-in var(--t-slow) 80ms var(--ease-out) backwards;
}

.solo-brief h2 { font-size: calc(.36 * var(--t)); font-weight: 900; letter-spacing: .06em; }

.solo-brief p { font-size: max(calc(.18 * var(--t)), 13px); color: var(--text-md); }

.solo-brief ul { margin: .06rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .08rem; font-size: max(calc(.16 * var(--t)), 12px); color: var(--text-lo); }

.solo-brief li::before { content: ''; display: inline-block; width: .06rem; height: .06rem; margin: 0 .12rem .02rem 0; background: var(--mint-600); transform: rotate(45deg); vertical-align: middle; }

.solo-brief b { color: var(--text-hi); }


/* ---- spectator seats (观战席, community report #26) -------------------------------------------------------------- */


/* ---- bottom bar ----------------------------------------------------------------------------------------- */

.room-bar {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "settings status actions";
  align-items: center;
  gap: .3rem;
  min-height: 1.5rem;
  padding: .16rem .6rem;
  background: linear-gradient(0deg, rgba(7, 9, 8, .96), rgba(10, 13, 12, .7));
  border-top: 1px solid var(--line);
}

.room-bar::before {
  content: '';
  position: absolute;
  left: .6rem;
  right: .6rem;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--mint-700), transparent 30%, transparent 70%, var(--mint-700));
}

.room-bar__left { grid-area: settings; display: flex; flex-direction: column; align-items: flex-start; gap: .12rem; min-width: 0; }

.room-bar__difficulty { display: flex; align-items: center; gap: .22rem; min-width: 0; }

.room-bar__label { display: flex; flex-direction: column; font-size: max(calc(.17 * var(--t)), 13px); font-weight: 700; color: var(--text-md); line-height: 1.35; }

.room-bar__center { grid-area: status; display: flex; flex-direction: column; align-items: center; gap: .06rem; min-width: 0; text-align: center; }

.room-bar__status { font-size: max(calc(.15 * var(--t)), 12px); }

/* 「AI 队友最后选择」 (GitHub #338, co-op): one switch styled like a difficulty option, under the difficulty picker */

.room-bar__opts { display: flex; flex-direction: column; align-items: flex-start; gap: .08rem; min-width: 0; }


.ready-count[hidden] { display: none; }

.ready-count { display: flex; align-items: baseline; gap: .06rem; font-size: max(calc(.16 * var(--t)), 12px); }

.ready-count b { font-size: calc(.36 * var(--t)); line-height: 1; color: var(--mint-400); text-shadow: 0 0 .14rem rgba(23, 249, 183, .45); }

.ready-count .t-dim { font-size: max(calc(.22 * var(--t)), 14px); }

.ready-count__icons { display: flex; gap: .02rem; margin-left: .12rem; align-self: center; }

.ready-count__icons .icon { width: .28rem; height: .28rem; color: var(--line-3); transition: color var(--t-med); }

.ready-count__icons .icon.is-on { color: var(--mint-400); filter: drop-shadow(0 0 4px var(--mint-glow)); }


.room-bar .btn--xl { min-width: 3.2rem; letter-spacing: .2em; }
@media (max-width: 1100px){
  .room-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "settings actions" "status status"; gap: max(.12rem, 8px) .24rem; }

  .room-bar__difficulty, .room-bar .dpick { flex-wrap: wrap; max-width: 100%; }

  .room-bar__center { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .16rem; }}
@media (max-width: 600px){
  .room-bar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "settings" "status" "actions"; }

  .room-bar__left { align-items: center; }}


/* ---- phones and narrow windows (the lobby's breakpoints, screens/lobby.css): one row of 44 px controls — 离开, 统计,
   设置, 玩法说明 as icons, the invite key — and the connection status on its own strip under it (it was squeezed into a
   column over the seat cards). Short landscape screens drop the title: the difficulty stays in the bottom bar. ------ */
@media (max-width: 767px), (max-height: 460px){
  .room-screen .topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; height: auto; min-height: 0;
    padding: 4px calc(12px + var(--sa-r, 0px)) 4px calc(12px + var(--sa-l, 0px)); }

  .room-screen .topbar__left { display: contents; }

  .room-screen .topbar__left .btn--square.btn--lg { --sq: 44px; height: 44px; }

  .room-screen .topbar__left > .btn:not(.btn--square) { order: 1; width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; }

  /* the label's text goes (设置 draws its gear inside the label); the name stays on aria-label / title */

  .room-screen .topbar__left > .btn:not(.btn--square) .btn__label { font-size: 0; letter-spacing: 0; }

  .room-screen .topbar__left > .btn .btn__icon, .room-screen .topbar__left > .btn .btn__label > .icon { width: 20px; height: 20px; }

  .room-screen .stats-entry .btn__icon + .btn__label { position: static; width: auto; height: auto; margin: 0; clip: auto; }

  .room-screen .topbar__center { order: 2; flex: 1 1 100%; min-width: 0; }

  .room-screen .topbar__center .micro { display: none; }

  .room-screen .topbar__title { font-size: max(calc(.25 * var(--t)), 15px); }

  .room-screen .topbar__right { order: 1; margin-left: auto; }

  .room-ping { order: 3; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; min-width: 0; }

  .room-ping .latency-status { flex-wrap: wrap; gap: 4px 6px; }

  .room-ping .ping, .room-ping .server-load-button, .room-ping .latency-status > * { min-height: 28px; }

  .invite { grid-template-columns: auto auto; padding: 4px 8px; column-gap: 8px; }

  .invite__label { display: none; }

  .invite__code span { width: 28px; height: 36px; font-size: 22px; }

  .invite__btns { flex-direction: row; }

  .invite__btns .btn { min-height: 36px; font-size: 12px; padding-inline: 8px; }

  .solo-note { font-size: 12px; }

  .solo-note .micro, .room-screen .seat .micro, .room-bar .micro { display: none; }

  /* small buttons of the seat cards and the bottom bar: readable and 36–44 px tall at the 40 px root */

  .room-screen .seat__foot .btn, .room-bar .btn--sm, .room-bar .dpick button { font-size: 12px; min-height: 36px; letter-spacing: .02em; }}
@media (max-height: 460px){
  .room-screen .topbar__center { display: none; }

  /* the bottom bar in two compact rows (it took half of a 360 px screen and squeezed the seat cards) */

  .room-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "settings actions" "status actions"; gap: 4px 12px; min-height: 0;
    padding: 6px calc(12px + var(--sa-r, 0px)) calc(6px + var(--sa-b, 0px)) calc(12px + var(--sa-l, 0px)); }

  .room-bar__label { display: none; }

  .room-bar__left { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }

  .room-bar__opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

  .room-bar__center { flex-direction: row; justify-content: flex-start; gap: 8px; }

  .room-bar__right .btn--lg { height: 36px; min-height: 36px; font-size: 12px; padding-inline: 10px; }

  .room-bar .btn--xl { height: 44px; min-width: 0; font-size: 15px; letter-spacing: .1em; }

  .ready-count b { font-size: 18px; }

  .ready-count__icons { display: none; }}

/* a portrait phone: the four seats in two rows of two (one row left most of the screen empty) */
@media (max-width: 600px) and (min-height: 461px){
  .seats:not(.seats--expanded):not(.seats--solo) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(0, 1fr);
    align-content: stretch; gap: 10px; padding: 10px 12px; }}


/* AI 指定策略: the AI seat's strategy chip (the host's opens the picker) and the picker dialog */

.seat__band { display: inline-flex; align-items: center; gap: .05rem; max-width: 100%; margin: .04rem auto 0; padding: .02rem .08rem;
  border: 1px solid rgba(159, 212, 255, .3); background: rgba(159, 212, 255, .06); color: var(--text-md);
  font-size: max(calc(.13 * var(--t)), 12px); }

.seat__band .bandicon { --bi: .26rem; }

.seat__band .icon { width: .14rem; height: .14rem; flex: none; }

.seat__band-k { color: var(--ice); font-weight: 700; }

.seat__band-name { max-width: 1.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-hi); }

.seat__band.is-editable { cursor: pointer; }

.seat__band.is-editable:hover { border-color: var(--ice); }

.seat__band.is-editable:disabled { cursor: default; opacity: .7; }

.botband-dlg__tip { margin: 0 0 .12rem; font-size: max(calc(.13 * var(--t)), 12px); }

.botband-dlg__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(1.4rem, 1fr)); gap: .08rem; }

.botband { display: flex; flex-direction: column; align-items: center; gap: .04rem; padding: .08rem .06rem; cursor: pointer;
  background: rgba(12, 15, 14, .82); border: 1px solid var(--line); color: var(--text-md); }

.botband:hover:not(:disabled) { border-color: var(--line-3); }

.botband .bandicon { --bi: .7rem; border: 1px solid var(--line-2); }

.botband__auto { display: grid; place-items: center; width: .7rem; height: .7rem; border: 1px dashed var(--line-3); color: var(--ice); }

.botband__auto .icon { width: .36rem; height: .36rem; }

.botband__name { font-size: max(calc(.14 * var(--t)), 12px); font-weight: 700; color: var(--text-hi); text-align: center; }

.botband__eff, .botband__used { font-size: max(calc(.11 * var(--t)), 10px); color: var(--text-dim, #8a9590); text-align: center; }

.botband__used { color: var(--gold, #f6a329); }

.botband.is-sel { border-color: var(--mint-400); background: linear-gradient(180deg, rgba(78, 216, 175, .18), rgba(12, 15, 14, .85)); }

.botband.is-used { cursor: not-allowed; }

.botband.is-used .bandicon { filter: grayscale(.8) brightness(.62); }


/* named elite AI (ADDON: elite AI port) — the second button under 添加 AI 队友 in an empty seat */

.rseat__adds { display: flex; flex-direction: column; gap: .05rem; }

.rseat__adds > *, .rseat__adds .rseat__addbot { width: 100%; }
 /* 添加精英干员 is the same block as 添加 AI 队友 */

.elite-recruit { position: relative; }

.elite-recruit__menu { position: absolute; left: 0; right: 0; bottom: calc(100% + .04rem); z-index: 6; display: flex;
  flex-direction: column; gap: .03rem; padding: .04rem; border: 1px solid var(--line-2); background: var(--bg-1, #0b0e0d); }

.elite-recruit__menu button { padding: .05rem .08rem; text-align: left; border: 1px solid transparent; background: transparent;
  color: var(--ink-0); font-size: calc(.115 * var(--t)); cursor: pointer; }

.elite-recruit__menu button:hover:not(:disabled), .elite-recruit__menu button:focus-visible { border-color: var(--mint-700); }

.elite-recruit__menu button:disabled { opacity: .45; cursor: default; }

/* Feedback content owns the board; the composer is a separate topmost modal. */
.modal__box.feedback-board { height: min(84vh, 900px); }
/* Toolbar pinned at the top, the four columns take what is left and scroll inside; 关闭反馈板 stays in the footer,
   bottom right, the way the admin panel keeps 退出管理 / 关闭 there. */
.feedback-board .modal__body { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.feedback-board .modal__actions { justify-content: flex-end; }
.fb-toolbar { display: flex; gap: .12rem; align-items: center; flex: none; flex-wrap: wrap; }
.fb-count { flex: none; color: var(--mint-400); font-variant-numeric: tabular-nums; font-size: max(calc(.13 * var(--t)), 11px); }
.feedback-compose-dialog .fb-compose { margin-top: .12rem; }
.fb-hint { flex: 1 1 320px; margin: 0; font-size: max(calc(.13 * var(--t)), 11px); line-height: 1.5; color: var(--text-lo); }
.fb-link { background: none; border: 0; padding: 0 0 0 .08rem; color: var(--mint-400); font: inherit; cursor: pointer; text-decoration: underline; }
.fb-link:hover, .fb-link:focus-visible { color: var(--mint-300); }
.fb-error { margin: 0; padding: .04rem .08rem; font-size: max(calc(.13 * var(--t)), 11px); color: var(--danger, #ff7a6a);
  border-left: 2px solid currentColor; background: rgba(255, 122, 106, .08); }
.fb-input { width: 100%; box-sizing: border-box; padding: .06rem .08rem; color: var(--text-hi); background: rgba(6, 11, 10, .8);
  border: 1px solid var(--line-2); border-radius: 2px; font: inherit; font-size: max(calc(.14 * var(--t)), 12px); resize: vertical; }
.fb-input:focus-visible { outline: none; border-color: var(--mint-500); }
.fb-compose { display: flex; flex-direction: column; gap: .06rem; align-items: flex-start; padding: .08rem;
  border: 1px solid var(--line); background: rgba(8, 15, 14, .6); }
.fb-compose .fb-input { flex: none; }
.fb-compose--new { border-top: 2px solid var(--mint-500); }
.fb-compose .btn { align-self: flex-end; }
.fb-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .12rem; min-height: 0; flex: 1 1 auto; }
.fb-column { display: flex; flex-direction: column; gap: .06rem; min-width: 0; min-height: 0; }
.fb-column__title { display: flex; align-items: center; gap: .06rem; margin: 0; padding-bottom: .04rem; font-size: max(calc(.14 * var(--t)), 12px);
  font-weight: 800; letter-spacing: .04em; color: var(--text-hi); border-bottom: 1px solid var(--line-2); }
.fb-column__title .num { margin-left: auto; color: var(--mint-400); font-variant-numeric: tabular-nums; }
.fb-column__list { display: flex; flex-direction: column; gap: .08rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.fb-card { display: flex; flex-direction: column; gap: .04rem; padding: .06rem .08rem; border: 1px solid var(--line);
  border-left: 2px solid var(--line-3); background: rgba(8, 15, 14, .72); }
.fb-card.is-open { border-color: var(--mint-700); border-left-color: var(--mint-500); }
.fb-card__head { display: flex; flex-direction: column; align-items: flex-start; gap: .02rem; padding: 0; background: none;
  border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fb-card__title { font-size: max(calc(.14 * var(--t)), 12px); font-weight: 700; color: var(--text-hi); line-height: 1.35; }
.fb-card__meta { font-size: max(calc(.11 * var(--t)), 10px); color: var(--text-lo); }
.fb-card__body { margin: 0; font-size: max(calc(.13 * var(--t)), 11px); line-height: 1.5; color: var(--text-md, #c3ccc7);
  white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fb-card.is-open .fb-card__body { display: block; overflow: visible; }
.fb-card__thread { display: flex; flex-direction: column; gap: .05rem; margin-top: .04rem; padding-top: .04rem; border-top: 1px dashed var(--line-2); }
.fb-reply { display: grid; grid-template-columns: auto 1fr auto; gap: .04rem; align-items: baseline; font-size: max(calc(.12 * var(--t)), 11px); }
.fb-reply__who { color: var(--mint-400); font-weight: 700; }
.fb-reply.is-maintainer .fb-reply__who { color: var(--amber, #ffc04d); }
.fb-reply__body { color: var(--text-md, #c3ccc7); white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-reply__t { color: var(--text-lo); font-size: max(calc(.1 * var(--t)), 9px); }
.fb-manage { display: flex; flex-wrap: wrap; gap: .04rem; }
.fb-state { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: .06rem; padding: .3rem .1rem; text-align: center; }
.fb-state h3 { margin: 0; font-size: max(calc(.17 * var(--t)), 13px); }
.fb-state p { margin: 0; font-size: max(calc(.13 * var(--t)), 11px); color: var(--text-lo); }

/* The owner panel shares the lobby's native dialog shell, not the ordinary player password gate. */
.admin-entry { margin-top: .08rem; font-size: max(calc(.12 * var(--t)), 11px); }
.modal__box.admin-panel { height: min(88vh, 940px); --admin-bar-h: max(.5rem, 34px); }
/* Every tab keeps the same bars in the same place: tabs · note · search · actions · operation row · list · pages. */
.admin-panel .modal__body { display: flex; flex-direction: column; gap: .08rem; flex: 1 1 auto; overflow: hidden; min-height: 0; }
/* 退出管理 / 关闭 stay in the modal footer, bottom right, while the list scrolls behind them. */
.admin-panel .modal__actions { justify-content: flex-end; }
.admin-tabs { display: flex; flex: none; align-items: center; gap: .06rem; height: var(--admin-bar-h); overflow-x: auto; overflow-y: hidden; }
.admin-shell { display: flex; flex-direction: column; flex: 1 1 auto; gap: .08rem; min-height: 0; }
.admin-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: none;
  height: var(--admin-bar-h); margin: 0; font-size: max(calc(.13 * var(--t)), 11px); line-height: 1.35; color: var(--text-lo); }
.admin-search, .admin-bar, .admin-op { display: flex; flex: none; flex-wrap: nowrap; align-items: center; gap: .08rem;
  height: var(--admin-bar-h); min-width: 0; overflow: hidden; }
.admin-search > .fb-input { flex: 1 1 auto; width: auto; min-width: 0; }
/* .fb-hint carries a 320px flex basis for the board's toolbar row; in this column it would eat the spare height and push
   every pinned row down on a tab whose list is short (操作记录 before the first entry) */
.admin-panel .fb-hint { flex: none; }
.admin-search > .btn, .admin-bar > .btn, .admin-op > .btn { flex: none; }
.admin-check { display: flex; flex: none; align-items: center; gap: .06rem; white-space: nowrap; }
.admin-count { flex: none; min-width: 3.4em; color: var(--text-lo); font-variant-numeric: tabular-nums; }
.admin-op__note { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: max(calc(.13 * var(--t)), 11px); color: var(--text-lo); }
.admin-target { flex: 1 1 auto; width: auto; min-width: 0; }
.admin-row__actions { display: flex; flex-wrap: wrap; gap: .06rem; margin-top: .04rem; }
.admin-feedback-edit, .admin-feedback-edit label { display: flex; flex-direction: column; gap: .08rem; }
.admin-feedback-edit { overflow-wrap: anywhere; }
.admin-feedback-dialog .modal__actions { justify-content: flex-end; }
.admin-login { max-width: 540px; display: flex; flex-direction: column; gap: .12rem; }
.admin-login label { display: flex; flex-direction: column; gap: .06rem; }
.admin-list { display: flex; flex: 1 1 auto; flex-direction: column; gap: .08rem; min-height: 0; overflow-y: auto; }
.admin-state { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; }
.admin-row { display: flex; align-items: flex-start; gap: .12rem; padding: .12rem; border: 1px solid var(--line); background: rgba(8, 15, 14, .7); }
.admin-row > input { flex: none; }
.admin-row__content { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .04rem; overflow-wrap: anywhere; }
.admin-row__content p, .admin-results p { margin: 0; white-space: pre-wrap; }
.admin-row__content code, .admin-row__content small { color: var(--text-lo); }
.admin-preview { width: 88px; height: 88px; object-fit: contain; background: rgba(0, 0, 0, .3); }
.admin-preview--namecards { width: min(100%, 320px); height: 80px; }
.admin-results { flex: none; padding: .1rem; border-left: 2px solid var(--mint-500); }
.admin-pagination { display: flex; flex: none; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: .08rem;
  height: var(--admin-bar-h); overflow: hidden; }

@media (max-width: 860px) {
  /* one narrow column: the stack itself scrolls rather than four lists each too short to read */
  .fb-columns { grid-template-columns: minmax(0, 1fr); grid-auto-rows: min-content; align-content: start;
    overflow-y: auto; }
  .fb-column__list { flex: none; overflow: visible; }
  /* the titles scroll with their column: sticky ones from the lower (short) columns floated over
     the first column's cards */
  .fb-column__title { position: static; }
  /* One line per bar, scrolled sideways when it does not fit: a wrapped two-line action row used
     to push the list down, so every tab started its rows at a different height. */
  .admin-search, .admin-bar, .admin-op { overflow-x: auto; overflow-y: hidden; }
  .admin-search > .fb-input { min-width: 40vw; }
}