/* ==========================================================================================
   screens/game.css — in-match screen layout & HUD (js/screens/game.js, js/ui/hud.js, bondStrip.js,
   teamPanel.js, emotes.js, ticker.js, effectsList.js, combatHud.js, settings.js, matchChrome.js,
   fallbackField.js). Shop: game-shop.css. Panels / overlays / rich text: game-panels.css.
   Sizes in rem (1rem = 100 design px at 1920×1080).
   ========================================================================================== */

/* ---- screen shell ---------------------------------------------------------------------------- */
.gm { background: transparent; }
/* Host test dock (public/js/ui/testDock.js DOCK_REM). Unitless rem, shared by the HUD and the dock.
   team-right = .team left .22 + avatar .8 + gap .1 + name 1.5 + info padding .18.
   bond-bottom = fieldHost.js HUD_REM.bondStripBottom. shop-top = HUD_REM.shopBarTop.
   hand-clear = prep hudPadding bottom 3.2 + the bench piece 1.56. top = bottom of .gtop.
   ready-h = .gtop padding .2 + clock --cd-h .7 + gap .1 + .readybtn .56. */
.gm, .testconsole {
  --dock-w: 3.6;
  --dock-margin: 0.08;
  --dock-team-left: 0.22;
  --dock-team-right: 2.8;
  --dock-team-top: 2.36;
  --dock-team-avatar: 0.8;
  --dock-team-gap: 0.14;
  --dock-team-rows: 4;
  --dock-bond-left: 1.56;
  --dock-bond-top: 1.36;
  --dock-bond-bottom: 2.16;
  --dock-bond-slot: 0.74;
  --dock-bond-gap: 0.1;
  --dock-top: 1.02;
  --dock-hand-clear: 4.76;
  --dock-hand-left: 2.85;
  --dock-ready-right: 0.3;
  --dock-ready-w: 2.6;
  --dock-ready-h: 1.56;
  --dock-shop-top: 2.64;
  --dock-funds-w: 1.18;
  --dock-shop-right: 0.26;
}
.gm__field { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.gm__field canvas { display: block; }
.gm__vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 9, 8, .78) 0%, rgba(6, 9, 8, 0) 18%),
    linear-gradient(0deg, rgba(6, 9, 8, .6) 0%, rgba(6, 9, 8, 0) 22%),
    radial-gradient(120% 90% at 45% 50%, transparent 60%, rgba(0, 0, 0, .5) 100%);
}
.gm__loading { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.gm__hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.gm__hud > * { pointer-events: auto; }
.gload { align-items: center; justify-content: center; gap: .2rem; }

/* Host test console (DESIGN §34.8). A floating field panel. Its default left/top is the dock home
   (right of .team, below the bond strip, above the hand) from the --dock-* rem above. The host drags
   it by the header; JS then sets left/top in px. At ≤720px the top sheet wins, including over a stored position. */
.testconsole {
  position: fixed;
  left: calc((var(--dock-team-right) + var(--dock-margin)) * 1rem);
  top: calc((var(--dock-bond-bottom) + var(--dock-margin)) * 1rem);
  z-index: 20; display: flex; flex-direction: column; align-items: flex-start;
  gap: .06rem; width: auto; max-width: min(calc(var(--dock-w) * 1rem), 28vw);
  max-height: calc(100vh - (var(--dock-hand-clear) + var(--dock-bond-bottom) + var(--dock-margin) * 2) * 1rem);
  pointer-events: auto; box-sizing: border-box;
}
.testconsole.is-open {
  width: min(calc(var(--dock-w) * 1rem), 28vw);
  overflow: hidden;
}
.testconsole__tab, .testconsole__run, .testconsole__row button {
  color: #1a1408; background: #e8b84a; border: 0; font-weight: 700; padding: .04rem .1rem; cursor: pointer;
}
.testconsole__run { flex: 0 0 auto; }
.testconsole__body {
  width: 100%; display: grid; gap: .06rem; padding: .1rem; background: rgba(12, 14, 12, .94);
  border: 1px solid rgba(232, 184, 74, .7); color: var(--text-hi); font-size: calc(.15 * var(--t));
  max-height: calc(100vh - (var(--dock-hand-clear) + var(--dock-bond-bottom) + var(--dock-margin) * 2) * 1rem - .4rem);
  overflow: auto; box-sizing: border-box;
}
.testconsole.is-open .testconsole__body { flex: 1 1 auto; min-height: 0; max-height: none; }
.testconsole__head, .testconsole__row, .testconsole__field, .testconsole__check { display: flex; flex-wrap: wrap; align-items: center; gap: .06rem; }
.testconsole__head { cursor: grab; touch-action: none; user-select: none; }
.testconsole__head:active { cursor: grabbing; }
.testconsole__field { display: grid; gap: .02rem; min-width: 0; }
.testconsole__row .testconsole__field { flex: 1 1 8em; }
.testconsole__field input, .testconsole__field select {
  color: var(--text-hi); background: var(--bg-2); border: 1px solid var(--line-2); padding: .03rem .06rem;
  min-width: 0; width: 100%; box-sizing: border-box;
}
/* the audit log keeps about five rows: a scroll container's automatic minimum is 0, so in the open panel's grid the
   other controls squeezed it to a few px at the default height (the panel body scrolls instead) */
.testconsole__log { margin: 0; padding: 0; list-style: none; min-height: 1.1rem; max-height: 2.4rem; overflow: auto; overflow-wrap: anywhere; }
.testconsole__log .is-bad { color: #ff8a5c; }
@media (max-width: 720px) {
  .testconsole {
    top: 8px !important; left: 8px !important; width: auto !important;
    max-width: calc(100vw - 16px) !important; max-height: none !important; font-size: 14px;
  }
  .testconsole.is-open { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: 55vh !important; }
  .testconsole__body, .testconsole.is-open .testconsole__body { font-size: 14px; max-height: 48vh !important; flex: none; }
  .testconsole__tab, .testconsole__run, .testconsole__row button,
  .testconsole__field input, .testconsole__field select {
    min-height: 32px; min-width: 32px; font-size: 14px; padding: 6px 10px;
  }
}

/* ---- top bar -------------------------------------------------------------------------------------- */
.gtop {
  position: absolute; left: 0; right: 0; top: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start;
  padding: .2rem .3rem 0 .26rem; gap: .2rem; pointer-events: none;
}
.gtop > * { pointer-events: auto; }
.gtop__left { display: flex; align-items: center; gap: .16rem; }
.gtop__meta { display: flex; flex-direction: column; align-items: flex-start; gap: .06rem; }
/* a match with gameplay plugins (DESIGN §32.6): the HUD corner's MOD mark */
.gtop__mod { pointer-events: auto; }
.gtop__rules { max-width: 3.4rem; font-size: calc(.11 * var(--t)); line-height: 1.4; color: var(--text-md); overflow-wrap: anywhere; }
/* the latency pill and, beside it, the 观战席 capsule (ui/hud.js SpectatorPill: an eye + how many are watching; opens the roster) */
.gtop__net { display: flex; align-items: center; gap: .08rem; }
.specpill { --btn-bg: rgba(0, 0, 0, .5); --btn-bg-hover: rgba(0, 0, 0, .66); --btn-bd: var(--line); height: .32rem; min-width: 0; padding: 0 .12rem; gap: .05rem; border-radius: 99px; }
.specpill .btn__icon { width: .18rem; height: .18rem; color: var(--mint-500); }
.specpill__num { font-size: .18rem; font-weight: 700; color: var(--mint-400); }
.specpill.is-me { --btn-bd: var(--mint-600); }
/* the roster inside its modal */
.spec__roster { display: flex; flex-direction: column; gap: .06rem; margin: 0 0 .1rem; padding: 0; list-style: none; }
.spec__row { display: flex; align-items: center; gap: .1rem; min-height: .44rem; padding: .04rem .1rem; background: rgba(255, 255, 255, .03); border: 1px solid transparent; }
.spec__row.is-me { border-color: var(--mint-700); background: rgba(45, 212, 191, .08); }
.spec__row.is-offline .spec__name { color: var(--text-dim); }
.spec__ico { width: .18rem; height: .18rem; flex: none; color: var(--mint-500); }
.spec__row.is-offline .spec__ico { color: var(--text-dim); }
.spec__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(.19 * var(--t)); color: var(--text-hi); }
.spec__hint { margin: .04rem 0 0; font-size: calc(.15 * var(--t)); line-height: 1.45; }
.gtop__exit { box-shadow: 0 .06rem .2rem rgba(0, 0, 0, .5); }
.gtop__center {
  --bk-c: var(--mint-700);
  display: flex; align-items: center; gap: .18rem;
  height: .78rem; padding: 0 .24rem 0 .14rem; margin-top: .02rem;
  background: linear-gradient(180deg, rgba(10, 14, 12, .92), rgba(10, 14, 12, .78));
  border: 1px solid var(--line);
  box-shadow: 0 .08rem .28rem rgba(0, 0, 0, .45);
  position: relative;
}
/* 休整期加时投票: in the top bar immediately left of 本局信息, same height as 冻结, square seven-colour frame */
.gtop__addtime { display: flex; align-items: center; gap: .08rem; }
/* 投票菜单: immediately left of +30/+60; the popover opens under the button */
.vote-menu-wrap { position: relative; }
.vote-menu-btn {
  display: inline-flex; align-items: center; gap: .05rem; height: .48rem; padding: 0 .1rem;
  border: 1px solid var(--mint-700); background: rgba(8, 11, 10, .92); color: var(--mint-300);
  font-size: calc(.16 * var(--t)); letter-spacing: .04em;
}
.vote-menu-btn:hover { border-color: var(--mint-500); color: #fff; }
.vote-menu-btn .icon { width: .18rem; height: .18rem; }
.vote-menu-layer { position: absolute; top: 0; left: 0; z-index: 80; }
.vote-menu__back { position: fixed; inset: 0; border: 0; background: transparent; }
.vote-menu {
  position: absolute; top: .54rem; left: 0; width: 5.4rem; max-height: 6.8rem; overflow-y: auto;
  padding: .14rem; background: linear-gradient(180deg, rgba(18, 24, 21, .98), rgba(7, 10, 9, .99));
  border: 1px solid var(--mint-700); box-shadow: 0 .18rem .5rem rgba(0, 0, 0, .6);
  color: var(--text-md); font-size: calc(.15 * var(--t));
}
.vote-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .08rem; color: var(--text-hi); font-weight: 700; font-size: calc(.2 * var(--t)); }
.vote-menu__head button { padding: 0; border: 0; background: none; color: var(--text-lo); }
.vote-menu__head .icon { width: .18rem; height: .18rem; }
.vote-menu__notice { margin-bottom: .08rem; padding: .06rem .08rem; border-left: 2px solid var(--amber); color: var(--amber); }
.vote-menu__sec { display: flex; flex-direction: column; gap: .08rem; padding: .1rem 0; border-top: 1px solid var(--line); }
.vote-menu__label { display: flex; align-items: baseline; gap: .08rem; color: var(--text-lo); font-size: calc(.13 * var(--t)); letter-spacing: .04em; }
.vote-menu__label span { color: var(--orange-hi); }
.vote-menu__targets { display: flex; flex-wrap: wrap; gap: .05rem; }
.vote-menu__target {
  padding: .04rem .08rem; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .3);
  color: var(--text-md); font-size: calc(.14 * var(--t));
}
.vote-menu__target.is-on { border-color: var(--mint-500); color: var(--mint-300); background: rgba(78, 216, 175, .1); }
.vote-menu__kick {
  align-self: flex-start; padding: .05rem .12rem; border: 1px solid var(--orange); background: rgba(158, 32, 43, .16);
  color: var(--orange-hi); font-size: calc(.14 * var(--t)); font-weight: 700;
}
.vote-menu__kick:disabled { opacity: .45; }
.vote-menu__row { display: flex; align-items: center; justify-content: space-between; gap: .12rem; }
.vote-menu__copy { display: flex; flex-direction: column; gap: .02rem; min-width: 0; }
.vote-menu__copy b { color: var(--text-hi); font-size: calc(.16 * var(--t)); }
.vote-menu__copy small { color: var(--text-lo); font-size: calc(.12 * var(--t)); line-height: 1.35; }
.vote-menu__go { flex: none; padding: .04rem .1rem; border: 1px solid var(--mint-600); background: rgba(23, 249, 183, .08); color: var(--mint-300); font-size: calc(.13 * var(--t)); }
.vote-menu__go:disabled { opacity: .45; }
.vote-menu__on { flex: none; color: var(--mint-400); font-size: calc(.13 * var(--t)); font-weight: 700; }
.vote-menu__boss { display: flex; align-items: center; gap: .06rem; }
.vote-menu__boss input { width: .62rem; height: .28rem; padding: 0 .04rem; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .4); color: #fff; font-size: calc(.14 * var(--t)); }
.vote-menu__foot { padding-top: .08rem; border-top: 1px solid var(--line); color: var(--text-dim); font-size: calc(.12 * var(--t)); line-height: 1.4; }
.vote-freezebtn {
  display: flex; align-items: center; gap: .08rem;
  height: .48rem; padding: 0 .14rem 0 .08rem;
  border: 2px solid transparent; border-image: linear-gradient(90deg, #ff5454, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a4dff, #ff4dd2) 1;
  border-radius: 0; background: rgba(8, 11, 10, .92); color: #fff;
  font-size: .19rem; font-weight: 700; letter-spacing: .1em; white-space: nowrap;
  box-shadow: 0 .04rem .14rem rgba(0, 0, 0, .45);
  cursor: pointer;
}
.vote-freezebtn .icon { width: .24rem; height: .24rem; color: #ffe27a; }
.vote-freezebtn:hover:not(:disabled) { filter: brightness(1.18); }
.vote-freezebtn:disabled { opacity: .5; cursor: not-allowed; }
/* the two official 🔍 buttons (ui/hud.js CheckBtn): btn_check_player (mint, left) and btn_check_enemy (amber, right);
   sprites are 35×29 (plain) / 61×29 (with chevrons) → .555rem / .967rem × .46rem */
.gtop__iconbtn {
  display: flex; align-items: center; justify-content: center; gap: .04rem; min-width: .46rem; height: .46rem; padding: 0 .1rem;
  background: rgba(78, 216, 175, .06); border: 2px solid var(--mint-600); border-radius: .06rem; color: #fff;
  font-family: var(--font-num); font-weight: 700;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), filter var(--t-fast), opacity var(--t-fast);
}
.gtop__iconbtn .icon { width: .24rem; height: .24rem; }
.gtop__iconbtn:hover, .gtop__iconbtn.is-on { background: var(--mint-a20); color: var(--mint-400); border-color: var(--mint-500); }
.gtop__iconbtn.is-on:not(.has-sprite) { opacity: .6; }
.gtop__iconbtn .enemybtn__chev { color: #fff; }
.gtop__right { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; justify-self: end; }
.gtop__right .countdown { --cd-h: .7rem; filter: drop-shadow(0 0 .12rem rgba(0, 0, 0, .8)); }
.gtop__clock { position: relative; display: flex; align-items: flex-start; justify-content: flex-end; gap: .14rem; min-width: 1.1rem; min-height: .7rem; }
/* 5–8 player rooms: the extra operator slots' targeted bond search, same size as the shop's 冻结 button, left of the
   clock. Absolutely placed in the free space left of the countdown so it can never push the clock off the bar. */
.tendbtn {
  position: absolute; right: calc(100% + .16rem); top: .02rem;
  display: flex; align-items: center; gap: .06rem; height: .48rem; padding: 0 .12rem; flex: none;
  background: rgba(8, 11, 10, .9); border: 2px solid var(--mint-600); color: var(--mint-400);
  font-size: .17rem; font-weight: 700; letter-spacing: .08em; box-shadow: 0 .04rem .14rem rgba(0, 0, 0, .45);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.tendbtn .icon, .tendbtn__bond.bglyph { width: .26rem; height: .26rem; }
.tendbtn__bond.bglyph { color: currentColor; }
.tendbtn:hover { background: var(--mint-a20); }

/* the targeted-search bond picker (ui/hud.js ShopTargetPicker) */
.targetpick__intro { margin: 0 0 .12rem; font-size: calc(.15 * var(--t)); line-height: 1.55; color: var(--text-md); }
.targetpick__none {
  display: flex; align-items: center; gap: .08rem; width: 100%; padding: .08rem .12rem; margin-bottom: .14rem;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); color: var(--text-md);
  font-size: calc(.16 * var(--t)); text-align: left;
}
.targetpick__none .icon { width: .2rem; height: .2rem; color: var(--mint-500); }
.targetpick__none:hover { border-color: var(--mint-600); color: var(--text-hi); }
.targetpick__none.is-selected { border-color: var(--mint-500); color: var(--mint-400); }
.targetpick__group { margin-top: .12rem; }
.targetpick__h { display: flex; align-items: baseline; gap: .08rem; margin: 0 0 .08rem; font-size: calc(.17 * var(--t)); color: var(--text-hi); }
.targetpick__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .08rem; }
.targetpick__bond {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .03rem;
  min-height: 1.08rem; padding: .1rem .04rem .08rem; background: rgba(0, 0, 0, .28); border: 1px solid var(--line-2);
  color: var(--text-lo); font-size: calc(.14 * var(--t)); text-align: center;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.targetpick__bond:hover:not(:disabled) { border-color: var(--mint-600); color: var(--text-hi); background: rgba(78, 216, 175, .06); }
.targetpick__bond.is-selected { border-color: var(--mint-400); color: var(--mint-400); box-shadow: inset 0 -2px 0 var(--mint-500); }
.targetpick__bond.is-off { opacity: .38; cursor: not-allowed; }
.targetpick__glyph.bglyph { width: .44rem; height: .44rem; }
.targetpick__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.targetpick__off { font-size: calc(.12 * var(--t)); color: var(--orange-hi); }
@media (max-width: 1100px) {
  .tendbtn { padding: 0 .08rem; font-size: .15rem; }
  .tendbtn__txt { display: none; }
  .targetpick__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* solo pause / resume (ui/hud.js PauseButton, official battle pause: two bars on a dark square) */
.pausebtn {
  display: grid; place-items: center; width: .6rem; height: .6rem; flex: none;
  background: rgba(10, 14, 12, .88); border: 2px solid rgba(242, 242, 242, .75); color: #fff;
  box-shadow: 0 .04rem .16rem rgba(0, 0, 0, .55);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.pausebtn__glyph { width: .3rem; height: .3rem; fill: currentColor; }
.pausebtn:hover:not(:disabled) { background: rgba(255, 255, 255, .14); border-color: #fff; }
.pausebtn.is-on { background: var(--mint-500); border-color: var(--mint-400); color: var(--text-on-mint); box-shadow: 0 0 .22rem rgba(23, 249, 183, .45); }
.pausebtn.is-busy { opacity: .6; }

/* boss-round overtime warning (ui/hud.js OvertimeWarning; red DOT look: official icon_warn / blood_icon + bg_lose_hp) */
.otwarn {
  position: relative; display: flex; align-items: center; gap: .08rem; height: .38rem; padding: 0 .14rem 0 .1rem;
  background: linear-gradient(90deg, rgba(120, 10, 14, .92), rgba(40, 6, 8, .88)); border: 1px solid rgba(255, 84, 84, .7);
  color: #ffdede; font-size: .16rem; white-space: nowrap; box-shadow: 0 0 .18rem rgba(255, 36, 36, .35);
  animation: ot-in var(--t-slow) var(--ease-out);
}
.otwarn__icon { width: .24rem; height: .24rem; object-fit: contain; flex: none; color: var(--red-premium); }
.otwarn__tag { font-family: var(--font-num); font-size: .13rem; font-weight: 700; letter-spacing: .1em; padding: 0 .05rem; background: #e2262a; color: #fff; line-height: 1.35; }
.otwarn__txt b { color: #fff; font-size: .2rem; }
.otwarn__lost { font-size: .13rem; color: rgba(255, 222, 222, .75); }
.otwarn__lost b { color: #fff; }
.otwarn--pending { border-style: dashed; }
.otwarn--pending .otwarn__icon { animation: blink 1s steps(2, end) infinite; }
.otwarn--drain { animation: ot-in var(--t-slow) var(--ease-out), ot-pulse 1s ease-in-out infinite; }
.otwarn__blood { display: grid; place-items: center; width: .5rem; height: .28rem; flex: none; background: radial-gradient(closest-side, rgba(255, 40, 40, .9), rgba(255, 40, 40, 0)); }
.otwarn--drain .otwarn__icon { color: #fff; }
.otwarn__tick {
  position: absolute; left: .18rem; top: -.04rem; font-size: .2rem; font-weight: 700; color: var(--red-premium);
  text-shadow: 0 0 .06rem rgba(0, 0, 0, .9); pointer-events: none; animation: ot-tick 1s var(--ease-out) forwards;
}
@keyframes ot-in { from { opacity: 0; transform: translateY(-.06rem); } }
@keyframes ot-pulse { 0%, 100% { box-shadow: 0 0 .12rem rgba(255, 36, 36, .3); } 50% { box-shadow: 0 0 .32rem rgba(255, 36, 36, .75); border-color: #ff6a6a; } }
@keyframes ot-tick { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-.3rem); } }
@media (prefers-reduced-motion: reduce) { .otwarn, .otwarn--drain, .otwarn__tick, .otwarn--pending .otwarn__icon { animation: none; } }

.roundbox { display: flex; align-items: center; gap: .08rem; }
.roundbox__label { font-size: .16rem; color: var(--text-lo); letter-spacing: .08em; }
.roundbox__num {
  min-width: .54rem; height: .44rem; display: grid; place-items: center; padding: 0 .08rem;
  background: #eef3f1; color: #0b0f0d; font-size: .32rem; font-weight: 700; line-height: 1;
  clip-path: polygon(.06rem 0, 100% 0, 100% calc(100% - .06rem), calc(100% - .06rem) 100%, 0 100%, 0 .06rem);
}

/* phase capsule */
.capsule {
  --cap: var(--mint-500);
  display: flex; align-items: center; gap: .1rem; height: .5rem; min-width: 2.2rem; padding: 0 .22rem 0 .12rem;
  border: 2px solid var(--cap); border-radius: .25rem;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .25)); background: linear-gradient(90deg, color-mix(in srgb, var(--cap) 16%, transparent), rgba(0, 0, 0, .25));
  box-shadow: inset 0 0 .14rem transparent, 0 0 .16rem transparent; box-shadow: inset 0 0 .14rem color-mix(in srgb, var(--cap) 30%, transparent), 0 0 .16rem color-mix(in srgb, var(--cap) 25%, transparent);
  white-space: nowrap;
}
.capsule__icon { width: .36rem; height: .36rem; object-fit: contain; color: var(--cap); flex: none; }
.capsule__label { font-size: .21rem; font-weight: 700; letter-spacing: .12em; color: var(--text-hi); }
.capsule__kills { font-size: .26rem; color: var(--text-lo); letter-spacing: .04em; }
.capsule__kills b { color: #fff; font-size: .3rem; }
.capsule__tag { font-size: .14rem; padding: .01rem .08rem; background: var(--orange); color: #1a0800; font-weight: 700; letter-spacing: .1em; }
/* 联防: a leaker's enemies still standing (MissTag, user playtest #6 item 7) — the official bg_miss_enemy pill (runner ×
   on its left 3/5, the number on the rest) or an orange look-alike */
.misstag {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: .03rem; height: .26rem; min-width: .84rem;
  padding: 0 .1rem 0 .08rem; border-radius: .13rem; background: #3b1a08; border: 1px solid var(--orange-hi);
  color: #fff; font-weight: 700; line-height: 1; flex: none;
}
.misstag.has-art { border: 0; border-radius: 0; background: transparent no-repeat left center / 100% 100%; width: .84rem; padding-right: .12rem; }
.misstag__icon { display: inline-flex; align-items: center; gap: .01rem; margin-right: auto; color: var(--orange-hi); font-size: .16rem; }
.misstag__icon .icon { width: .16rem; height: .16rem; }
.misstag__n { font-size: .2rem; }
.misstag.is-clear .misstag__n { color: var(--mint-400); }
.team__line .misstag { height: .21rem; min-width: .68rem; padding-right: .08rem; }
.team__line .misstag.has-art { width: .68rem; }
.team__line .misstag__n { font-size: .16rem; }
.team__line .misstag__icon { font-size: .13rem; }
.capsule--combat { --cap: var(--orange-hi); }
.capsule--boss { --cap: var(--orange-hi); min-width: 4.2rem; }
/* phase capsule scenes (ui/hud.js CapsuleScene, capsuleFxKind): the official hudPanel/trans_* sprites at ×1.3 of their
   pixels over the capsule, which hides or holds its own content meanwhile. Timings from the event's top bar (video
   7:55–7:58 回合开始 → 休整期, 8:32–8:34 作战, 8:38–8:41 联防); [ASSUMED] positions, sizes and timings estimated from it. */
.gtop__cap { position: relative; display: flex; }
.gtop__cap[class*="is-fx-"] .capsule { overflow: hidden; }
.capfx {
  position: absolute; inset: 2px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: .1rem;
  border-radius: .23rem; overflow: hidden; pointer-events: none;
}
.capfx .sprite { display: block; image-rendering: pixelated; }
.gtop__cap.is-fx-wait .capsule > * { visibility: hidden; }
.gtop__cap.is-fx-enter .capsule > * { animation: capfx-rise 240ms var(--ease-out) both; }
.gtop__cap.is-fx-rest .capsule__icon { animation: capfx-rest-icon 560ms 150ms var(--ease-out) both; }
.gtop__cap.is-fx-rest .capsule > :not(.capsule__icon) { animation: capfx-slide 260ms 450ms var(--ease-out) both; }
.gtop__cap.is-fx-clash .capsule > * { animation: capfx-rise 160ms 1870ms var(--ease-out) both; }
.gtop__cap.is-fx-unite .capsule > * { animation: capfx-rise 160ms 2800ms var(--ease-out) both; }
/* 回合开始: three kettles (trans_cup 31×29) drop in one after another and bob out of step; at 休整期 they fly up */
.capfx__k { width: .4rem; animation: capfx-drop 220ms calc(var(--i) * 70ms) var(--ease-out) both; }
.capfx__k .sprite { width: 100%; height: auto; animation: capfx-bob 420ms calc(300ms + var(--i) * 140ms) steps(1, end) infinite; }
.capfx--rest .capfx__k { animation: capfx-up 200ms calc(var(--i) * 50ms) ease-in forwards; }
.capfx--rest .capfx__k .sprite { animation: none; }
/* 作战 / 联防: the robot (trans_batte1 / coop1 31×33, its sword trans_batte2 / coop2 20×34 behind its left side) drops in,
   the enemy (trans_worm1 46×31 / worm2 57×25) hops in from the right edge and stops beside it */
.capfx__meet, .capfx__clash { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.capfx__meet { gap: .06rem; padding-top: .02rem; }
.capfx__us { display: grid; justify-items: end; align-items: end; }
.capfx__us > * { grid-area: 1 / 1; }
.capfx__bot { position: relative; width: .4rem; height: .43rem; animation: capfx-drop 200ms var(--ease-out) both; }
.capfx__body { position: relative; width: .4rem; height: .43rem; }
.capfx__sword { position: absolute; left: -.14rem; top: -.08rem; width: .26rem; height: .44rem; }
.capfx__foe { animation: capfx-hop 930ms linear both; }
.capfx__foe .sprite { width: .6rem; height: .4rem; }
.capfx--unite .capfx__bot { animation: capfx-drop 200ms 150ms var(--ease-out) both, capfx-hide 1ms 1500ms forwards; }
.capfx--unite .capfx__foe { animation-duration: 800ms; }
.capfx--unite .capfx__foe .sprite { width: .74rem; height: .33rem; }
/* 联防: the robot turns into the two 联防 faces (trans_coop4 smiling, trans_coop3 worried; 31×33 / 30×33) */
.capfx__faces { display: flex; gap: 0; opacity: 0; animation: capfx-show 1ms 1500ms forwards; }
.capfx__face { width: .39rem; height: .43rem; }
/* where they meet: the scene dims, the two crossed swords flash up and move left, 开始作战 / 联防开始 slides out of them */
.capfx--clash .capfx__meet { animation: capfx-dim 200ms 930ms forwards; }
.capfx--unite .capfx__meet { animation: capfx-dim 200ms 1600ms forwards; }
.capfx__clash { gap: .08rem; }
.capfx__swords { --sx: .6rem; position: relative; width: .45rem; height: .49rem; margin-top: -.03rem; opacity: 0; filter: drop-shadow(0 0 .05rem rgba(255, 190, 60, .7)); }
/* trans_batte2 / coop2 (×1.45 here, as large as the footage's) lean ≈ 28°: turned to 45° and mirrored they cross
   like the footage's ✕ */
.capfx__x { position: absolute; left: .08rem; top: 0; width: .29rem; height: .49rem; transform: rotate(-17deg); }
.capfx__x--flip { transform: scaleX(-1) rotate(-17deg); }
.capfx__word {
  font-family: var(--font-display); font-size: .27rem; font-weight: 900; letter-spacing: .06em; white-space: nowrap;
  color: #ffd54a; text-shadow: 0 0 .1rem rgba(255, 170, 40, .75); opacity: 0;
}
.capfx--unite .capfx__word { color: #ffbf6a; text-shadow: 0 0 .1rem rgba(255, 110, 40, .8); }
.capfx--clash .capfx__swords { animation: capfx-swords 450ms 930ms var(--ease-out) forwards; }
.capfx--clash .capfx__word { animation: capfx-word 300ms 1050ms var(--ease-out) forwards; }
.capfx--unite .capfx__swords { animation: capfx-swords 700ms 1600ms var(--ease-out) forwards; }
.capfx--unite .capfx__word { animation: capfx-word 300ms 2050ms var(--ease-out) forwards; }
/* then the words slide up out of the capsule and its own content rises in */
.capfx--clash .capfx__clash { animation: capfx-out 120ms 1800ms ease-in forwards; }
.capfx--unite .capfx__clash { animation: capfx-out 120ms 2700ms ease-in forwards; }
@keyframes capfx-rise { from { transform: translateY(110%); opacity: 0; } }
@keyframes capfx-slide { from { transform: translateX(-.4rem); opacity: 0; } }
@keyframes capfx-rest-icon {
  0% { transform: translate(.6rem, 110%); opacity: 0; }
  45% { transform: translate(.6rem, 0); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes capfx-drop { from { transform: translateY(-130%); opacity: 0; } }
@keyframes capfx-up { to { transform: translateY(-140%); opacity: 0; } }
@keyframes capfx-bob { 50% { transform: translateY(-.04rem); } }
@keyframes capfx-hop {
  0% { transform: translate(1.1rem, 0); } 12.5% { transform: translate(.96rem, -.06rem); } 25% { transform: translate(.82rem, 0); }
  37.5% { transform: translate(.69rem, -.06rem); } 50% { transform: translate(.55rem, 0); } 62.5% { transform: translate(.41rem, -.06rem); }
  75% { transform: translate(.28rem, 0); } 87.5% { transform: translate(.14rem, -.06rem); } 100% { transform: none; }
}
@keyframes capfx-hide { to { opacity: 0; } }
@keyframes capfx-show { to { opacity: 1; } }
@keyframes capfx-dim { 40% { opacity: .4; } 100% { opacity: 0; } }
@keyframes capfx-swords {
  0% { opacity: 0; transform: translateX(var(--sx)) scale(1.5); }
  15% { opacity: 1; transform: translateX(var(--sx)); }
  60% { opacity: 1; transform: translateX(var(--sx)); }
  100% { opacity: 1; transform: none; }
}
@keyframes capfx-word { from { opacity: 0; transform: translateX(-.5rem); filter: blur(2px) brightness(1.8); } to { opacity: 1; transform: none; filter: none; } }
@keyframes capfx-out { to { transform: translateY(-100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .capfx { display: none; }
  .gtop__cap .capsule > * { animation: none; visibility: visible; }
}
.bossbar { position: relative; flex: 1; min-width: 2.2rem; height: .2rem; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 122, 51, .5); overflow: hidden; }
.bossbar__fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #b8340d, var(--orange-hi)); box-shadow: 0 0 .1rem rgba(255, 110, 40, .8); transition: width 300ms var(--ease-out); }
.bossbar__txt { position: absolute; inset: 0; display: grid; place-items: center; font-size: .14rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }

/* LP tower */
.lp { display: inline-flex; align-items: center; gap: .05rem; color: var(--mint-400); white-space: nowrap; }
.lp__icon { width: 1.1em; height: 1.1em; object-fit: contain; flex: none; }
.lp b { font-weight: 700; line-height: 1; }
.lp--sm { font-size: .19rem; }
.lp--md { font-size: .24rem; }
.lp--lg { font-size: .34rem; }
.lp--lg .lp__icon { width: .42rem; height: .42rem; }
.lp--danger { color: var(--red-premium); }
.lp--danger .lp__icon { filter: hue-rotate(-140deg) saturate(2.4) brightness(.95); }
.lp--team { color: var(--mint-glow); }
/* the running battle's pending loss (LpTower `pending`, user playtest #3 item 2): the number turns red, a −N plate
   pops again on every new leak (keyed), 联防中 while teammates may still save part of it */
.lp.is-pending .lp__val { color: var(--red-premium); text-shadow: 0 0 .08rem rgba(255, 60, 60, .45); }
.lp__pend {
  align-self: center; margin-left: .02em; padding: .06em .24em; font-size: .56em; font-weight: 700; line-height: 1.1;
  color: #fff; background: #d8262a; box-shadow: 0 0 .1rem rgba(255, 50, 50, .55);
  clip-path: polygon(.12em 0, 100% 0, 100% calc(100% - .12em), calc(100% - .12em) 100%, 0 100%, 0 .12em);
  animation: lp-pend 520ms var(--ease-out);
}
.lp__note {
  align-self: center; padding: .08em .3em; font-size: .4em; font-weight: 700; letter-spacing: .08em; line-height: 1.2;
  color: #1a0800; background: var(--orange);
}
.lp--sm .lp__note { font-size: .6em; }
@keyframes lp-pend { 0% { opacity: 0; transform: scale(1.9); } 45% { opacity: 1; transform: scale(.92); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .lp__pend { animation: none; } }
.sp-reduced-motion .lp__pend { animation: none; }

/* enemy preview button: amber [🔍▶▶] → the pen (research 09 §2); grey [🔍] in the pen view and outside 休整期 */
.enemybtn {
  display: flex; align-items: center; justify-content: center; gap: .06rem; min-width: .46rem; height: .46rem; padding: 0 .14rem;
  background: rgba(20, 16, 10, .85); border: 2px solid var(--amber); border-radius: .06rem; color: #fff;
  font-family: var(--font-num); font-size: .16rem; letter-spacing: -.1em; font-weight: 700;
  transition: background var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast), opacity var(--t-fast);
}
.enemybtn .icon { width: .24rem; height: .24rem; }
.enemybtn__chev { font-size: .18rem; letter-spacing: -.12em; margin-left: .02rem; }
.enemybtn:hover:not(.is-grey) { background: rgba(246, 163, 41, .2); box-shadow: 0 0 .16rem rgba(246, 163, 41, .35); }
.enemybtn.is-grey { border-color: rgba(246, 163, 41, .32); color: rgba(255, 255, 255, .35); background: rgba(20, 20, 20, .8); }
.enemybtn[aria-disabled="true"] { cursor: not-allowed; }
/* official sprites: the picture is the whole button */
.gtop__iconbtn.has-sprite, .enemybtn.has-sprite {
  width: .555rem; min-width: 0; height: .46rem; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: var(--chk-sprite) center / 100% 100% no-repeat;
}
.gtop__iconbtn.has-sprite.is-wide, .enemybtn.has-sprite.is-wide { width: .967rem; }
.gtop__iconbtn.has-sprite:hover, .enemybtn.has-sprite:hover:not(.is-grey) { background: var(--chk-sprite) center / 100% 100% no-repeat; filter: brightness(1.2); box-shadow: none; }
.gtop__iconbtn.has-sprite.is-on { background: var(--chk-sprite) center / 100% 100% no-repeat; }

/* ready toggle */
.readywrap { display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; }
.readywrap__count { font-size: .14rem; color: var(--text-lo); }
.readywrap__count b { color: var(--mint-400); font-size: .17rem; }
/* why 准备就绪 is refused (the temp overflow row holds pieces, user playtest #3 item 3): shown, not only on hover */
.readywrap__why {
  display: inline-flex; align-items: center; gap: .05rem; padding: .02rem .1rem .02rem .06rem; font-size: .14rem; font-weight: 700;
  color: #ffdcd6; background: rgba(40, 6, 6, .88); border: 1px solid rgba(255, 90, 71, .7); border-right: 3px solid #ff5a47; white-space: nowrap;
}
.readywrap__why .icon { width: .16rem; height: .16rem; color: #ff6a55; flex: none; }
.readywrap__why b { color: #ff8a78; font-size: .16rem; }
.readybtn {
  display: flex; align-items: center; gap: .12rem; height: .56rem; padding: 0 .16rem 0 .12rem; min-width: 2.3rem;
  background: rgba(10, 14, 12, .9); border: 2px solid var(--mint-500); color: var(--text-hi);
  font-size: .22rem; font-weight: 700; letter-spacing: .14em;
  box-shadow: 0 0 .18rem rgba(23, 249, 183, .15);
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.readybtn:hover:not(:disabled) { background: rgba(78, 216, 175, .14); box-shadow: 0 0 .26rem rgba(23, 249, 183, .3); }
.readybtn__box { width: .3rem; height: .3rem; border: 2px solid var(--mint-500); display: grid; place-items: center; flex: none; }
.readybtn__box .icon { width: .26rem; height: .26rem; }
.readybtn__label { flex: 1; text-align: left; }
.readybtn__key { font-family: var(--font-num); font-size: .11rem; font-weight: 500; letter-spacing: .06em; color: var(--text-dim); border: 1px solid var(--line-2); padding: 0 .04rem; }
.readybtn.is-on { background: var(--mint-500); color: var(--text-on-mint); }
.readybtn.is-on .readybtn__box { border-color: var(--text-on-mint); background: var(--text-on-mint); color: var(--mint-400); }
.readybtn.is-on .readybtn__key { color: var(--mint-900); border-color: var(--mint-700); }
.readybtn.is-on:hover:not(:disabled) { background: var(--mint-400); color: var(--text-on-mint); box-shadow: 0 0 .3rem rgba(23, 249, 183, .45); }
.readybtn:disabled { border-color: var(--line-2); color: var(--text-dim); box-shadow: none; cursor: not-allowed; }
.readybtn:disabled .readybtn__box { border-color: var(--line-2); }
.readybtn.is-busy { opacity: .7; }

/* ---- bond strip ---------------------------------------------------------------------------------------- */
.gm__bonds { position: absolute; left: 1.56rem; top: 1.36rem; right: 5.2rem; pointer-events: none;
  display: flex; align-items: flex-start; gap: max(.1rem, 8px); }
/* Only the bond discs (and the +N chip) take the pointer: the strip's box spans the width under the top bar, where the
   top board row's units stand (row 12 at 16:9 / 21:9 / 720p / phones, the boss field's row 5 in a boss prep) — it used
   to swallow the taps and drags on them (review of user playtest #2 item 8: every own unit reachable). */
.gm__bonds > *, .gm__bonds .bstrip { pointer-events: none; }
.gm__bonds .bslot, .gm__bonds .bstrip__more { pointer-events: auto; }
.gm__bond-list { min-width: 0; }
/* The hidden list leaves no hit area over the board; only this compact tab can reopen it (GitHub #142). */
/* A bare arrow (the owner's request after 0.2.0: the boxed 「收起」 tab looked heavy): transparent, half-visible until
   hovered or focused; the 44 × 44 touch target stays (an invisible hit area), the name is the aria-label. */
.gm__bonds .bonds-toggle { pointer-events: auto; flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0; color: var(--text-hi); background: transparent; border: 0; cursor: pointer;
  opacity: .55; transition: opacity var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); line-height: 1; }
.bonds-toggle .icon { width: max(.22rem, 18px); height: max(.22rem, 18px); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .85)); }
.bonds-toggle[aria-expanded="false"] { opacity: .8; }
.bonds-toggle:hover, .bonds-toggle:focus-visible { opacity: 1; color: var(--mint-500); }
.bonds-toggle:focus-visible { outline: 2px solid var(--mint-500); outline-offset: -4px; }
.bstrip { display: flex; align-items: flex-start; gap: .1rem; flex-wrap: nowrap; }
.bstrip.is-frozen .bslot { opacity: .5; filter: saturate(.4); }
.bstrip--empty { display: inline-flex; align-items: center; gap: .12rem; padding: .08rem .16rem; font-size: .15rem; color: var(--text-dim); background: rgba(8, 11, 10, .6); border: 1px dashed var(--line-2); }
/* a watched teammate's bonds (DESIGN §20.15): an amber "👁 name" pill in front of the discs, amber rings. Horizontal at
   every width with a pixel floor (a vertical .12rem name was ~6-8 px per glyph on desktop / tablet, ~5 px on phones
   where 1rem is clamped at 40 px); centred on the discs, clear of the team panel below */
.bstrip__owner { align-self: center; flex: none; display: inline-flex; flex-direction: row; align-items: center; gap: max(.04rem, 3px);
  padding: max(.03rem, 2px) max(.06rem, 4px); border: 1px solid rgba(246, 163, 41, .5); background: rgba(40, 26, 6, .7); }
.bstrip__owner .micro { color: var(--amber); font-size: max(.15rem, 10px); letter-spacing: .04em; max-width: max(1.3rem, 72px);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bstrip__eye { color: var(--amber); font-size: max(.17rem, 11px); flex: none; }
.bstrip--empty .bstrip__owner .micro { max-width: max(1.6rem, 80px); }
.bstrip--empty.is-other { border-color: rgba(246, 163, 41, .5); }
@media (max-width: 767px) {
  .bstrip__owner .micro { font-size: max(.12rem, 9px); }
  .bstrip__eye { font-size: max(.15rem, 10px); }
}
.bstrip.is-other .bond__core { box-shadow: 0 0 0 1px rgba(246, 163, 41, .45); }
.bstrip__more { align-self: center; font-size: .16rem; color: var(--text-lo); padding: .04rem .08rem; border: 1px solid var(--line-2); background: rgba(8, 11, 10, .7); }
.bslot { position: relative; display: flex; flex-direction: column; align-items: center; width: .74rem; }
.bslot .bond { --disc: .52rem; }
.bslot .bond__name { font-size: .14rem; font-weight: 500; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.bslot__count {
  position: absolute; top: -.04rem; right: .02rem; font-size: .13rem; font-weight: 700; color: var(--text-hi);
  background: rgba(8, 11, 10, .92); border: 1px solid var(--line-2); padding: 0 .04rem; line-height: 1.35;
}
.bslot__count small { color: var(--text-dim); font-size: .11rem; }
.bslot__count.is-max { border-color: var(--mint-700); color: var(--mint-400); }
.bslot__expected {
  position: absolute; top: -.035rem; left: -.035rem; z-index: 3; margin: 0; padding: 0 .035rem;
  font-size: .12rem; font-weight: 800; line-height: 1.25; color: var(--mint-400);
  background: rgba(8, 11, 10, .94); border: 1px solid var(--mint-700);
  text-shadow: 0 0 .1rem rgba(23, 249, 183, .5); pointer-events: none;
}
.bslot.is-active .bslot__count { border-color: var(--mint-700); }
.bslot.is-open .bond__core { box-shadow: 0 0 0 2px var(--mint-400), 0 0 .2rem rgba(23, 249, 183, .6); }
/* a bond the mode never activates, with members (the server's `off` entry): the briefing's grey ✕ disc, the chips'
   struck name, 本局禁用 under it instead of the count */
.bslot.is-off .bond__name { color: var(--text-dim); text-decoration: line-through; text-decoration-color: rgba(255, 84, 84, .6); }
.bslot.is-off .bslot__off {
  position: static; margin-top: .02rem; font-size: .11rem; font-weight: 500; color: var(--text-dim); white-space: nowrap;
  background: rgba(8, 11, 10, .85); border: 1px dashed rgba(255, 255, 255, .25);
}

/* ---- team panel ------------------------------------------------------------------------------------------- */
.team { position: absolute; left: .22rem; top: 2.36rem; display: flex; flex-direction: column; gap: .14rem; pointer-events: none;
  max-height: calc(100% - 2.7rem); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
/* 4–7 players: no panel scrollbar; every seat is always drawn. 6–7 use a slightly smaller avatar/gap. */
.team--fit { max-height: none; overflow: visible; gap: var(--team-gap, .14rem); }
.team--fit .pavatar { --pa: var(--team-pa, .8rem); }
.team__row { position: relative; display: flex; align-items: center; gap: .1rem; pointer-events: auto; }
.team__btn {
  position: relative; padding: 0; background: none; border: 0;
  transition: transform var(--t-fast);
}
.team__btn:hover { transform: translateX(.03rem); }
.team__seat {
  position: absolute; left: -.02rem; top: -.04rem; font-size: .11rem; padding: 0 .04rem; line-height: 1.3;
  background: rgba(8, 11, 10, .9); color: var(--text-lo); border: 1px solid var(--line-2);
}
.team__ai { position: absolute; right: -.04rem; bottom: -.04rem; font-family: var(--font-num); font-size: .11rem; font-weight: 700; padding: 0 .04rem; background: #a9c3d8; color: #0b1520; }
.team__you { position: absolute; right: -.08rem; top: -.08rem; width: .22rem; height: .22rem; display: grid; place-items: center; background: var(--mint-500); color: var(--text-on-mint); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.team__you .icon { width: .14rem; height: .14rem; }
.team__info { display: flex; flex-direction: column; gap: .02rem; min-width: 0; padding: .04rem .12rem .04rem .06rem; background: linear-gradient(90deg, rgba(8, 11, 10, .82), rgba(8, 11, 10, 0)); }
.team__name { font-size: .15rem; font-weight: 500; color: var(--text-md); max-width: 1.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.team__line { display: flex; align-items: center; gap: .1rem; }
.team__status { width: .26rem; height: .26rem; display: grid; place-items: center; border: 1px solid currentColor; background: rgba(0, 0, 0, .5); }
/* the shared 机变 draft's pick order on the portrait (ui/choiceOverlay.js spMarks): ✓ picked, ••• deciding */
.team__spmark { position: absolute; right: -.07rem; bottom: -.05rem; z-index: 2; display: grid; place-items: center; width: .24rem; height: .24rem; border-radius: 50%;
  background: var(--mint-500); color: #05261e; box-shadow: 0 0 0 2px rgba(6, 9, 8, .9), 0 0 .08rem rgba(23, 249, 183, .5); }
.team__spmark .icon { width: .17rem; height: .17rem; }
.team__spmark.is-turn { display: flex; gap: 2px; width: auto; padding: 0 .05rem; border-radius: .12rem; background: rgba(8, 11, 10, .92); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.team__spmark.is-turn i { width: 3px; height: 3px; border-radius: 50%; background: #f2f5f4; animation: spmark-dot 1s ease-in-out infinite; }
.team__spmark.is-turn i:nth-child(2) { animation-delay: .16s; }
.team__spmark.is-turn i:nth-child(3) { animation-delay: .32s; }
@keyframes spmark-dot { 0%, 100% { opacity: .35; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .team__spmark.is-turn i { animation: none; } }
.team__status .icon { width: .18rem; height: .18rem; }
.team__kick {
  display: inline-grid; place-items: center; width: .24rem; height: .24rem; flex: none; margin-left: .02rem;
  padding: 0; background: rgba(158, 32, 43, .18); border: 1px solid rgba(232, 90, 26, .65); color: var(--orange-hi);
}
.team__kick:hover { background: rgba(232, 90, 26, .28); color: #fff; }
.team__kick .icon { width: .14rem; height: .14rem; }
.team__status .lsprite { width: .2rem; height: .2rem; object-fit: contain; }
.team__status.has-sprite { border-color: transparent; background: none; animation: none; }
.team__status.has-sprite .lsprite { width: .26rem; height: .26rem; }
.team__status.is-lo { color: var(--text-lo); }
.team__status.is-mint { color: var(--mint-400); }
.team__status.is-gold { color: var(--gold); animation: blink 1.2s steps(2) infinite; }
.team__status.is-orange { color: var(--orange-hi); }
.team__status.is-red, .team__status.is-offline { color: var(--red-premium); }
.team__eye { color: var(--amber); display: grid; }
.team__eye .icon { width: .2rem; height: .2rem; }
.team__row.is-self .pavatar { box-shadow: 0 0 0 2px var(--mint-500), 0 0 .18rem rgba(23, 249, 183, .35); }
.team__row.is-watched .pavatar { box-shadow: 0 0 0 2px var(--amber), 0 0 .18rem rgba(246, 163, 41, .45); }
.team__row.is-dead .team__name { color: var(--text-dim); text-decoration: line-through; }
/* 最终攻势 / 隐秘核心: the viewer's pair framed in the official green from the round's start (item 51) — the official
   ui/battle bg_team_border (a white frame with its glow) tinted through a mask; a plain green ring without the local art.
   It replaces the own row's mint ring; a watched row keeps its amber one inside the frame. */
.team__frame {
  position: absolute; inset: -.07rem; pointer-events: none; z-index: 1;
  background: var(--mint-500); -webkit-mask: var(--frame) center / 100% 100% no-repeat; mask: var(--frame) center / 100% 100% no-repeat;
}
.team__frame--plain { inset: -.04rem; background: none; -webkit-mask: none; mask: none; border: 2px solid var(--mint-500); box-shadow: 0 0 .14rem rgba(78, 216, 175, .65); }
.team__row.is-self.is-team .pavatar { box-shadow: none; }
.team__bubble { position: absolute; left: calc(100% + .06rem); top: 50%; transform: translateY(-50%); width: max-content; max-width: 3.2rem; }
/* 前往查看 / 返回战场 (research 09 §3.1: tapping a teammate's avatar expands a mint button under it) */
.team__row.is-open .pavatar { box-shadow: 0 0 0 2px var(--mint-400), 0 0 .2rem rgba(23, 249, 183, .45); }
.team__row.is-open .team__info { background: linear-gradient(90deg, rgba(13, 44, 36, .92), rgba(8, 11, 10, 0)); }
.team__ob, .team__back { align-self: flex-start; margin-top: .04rem; min-width: 1.1rem; animation: pop-in var(--t-fast) var(--ease-out); }
.team__ob .btn__label, .team__back .btn__label { letter-spacing: .12em; }
.team__back { border-color: rgba(255, 255, 255, .7); color: #fff; }

/* player avatar (band icon / glyph) */
.pavatar {
  --pa: .8rem;
  position: relative; display: block; width: var(--pa); height: var(--pa); flex: none;
  background: linear-gradient(135deg, hsl(var(--seat-hue) 40% 22%), hsl(var(--seat-hue) 30% 10%));
  border: 1px solid var(--line-2);
}
.pavatar--sm { --pa: .42rem; }
.pavatar__img { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; }
.pavatar__img img { width: 100%; height: 100%; object-fit: cover; }
/* added strategies' band icons carry a 10 px #323232 frame (180×180); crop it so the portrait is not cut at the top */
.pavatar__img img[src*="/icons/band/"] { transform: scale(1.125); }
.pavatar__glyph { font-weight: 900; font-size: calc(var(--pa) * .5); color: hsl(var(--seat-hue) 70% 72%); }
.pavatar__bot { width: 56%; height: 56%; color: #a9c3d8; }
.pavatar.is-dead .pavatar__img, .pavatar.is-left .pavatar__img, .pavatar.is-offline .pavatar__img { filter: grayscale(1) brightness(.4); }
.pavatar__x, .pavatar__door { position: absolute; inset: 0; display: grid; place-items: center; color: var(--red-premium); }
.pavatar__x .icon, .pavatar__door .icon { width: 60%; height: 60%; filter: drop-shadow(0 0 4px #000); }

/* ---- effects ---------------------------------------------------------------------------------------------- */
.gm__effects { position: absolute; right: .3rem; top: 2.4rem; }
/* 准备就绪 refused (the temp row holds pieces): its reason shows under the button and pushes the ready count down —
   the effects column follows, or the count runs into it on phones */
.gm.has-readywhy .gm__effects { top: calc(2.4rem + max(.3rem, 16px)); }
.effects { display: flex; flex-direction: column; align-items: flex-end; gap: .08rem; }
.effect {
  position: relative; width: .5rem; height: .5rem; display: grid; place-items: center;
  background: rgba(8, 11, 10, .85); border: 1px solid var(--line-2);
}
.effect img { width: 86%; height: 86%; object-fit: contain; }
.effect .icon { width: .28rem; height: .28rem; color: var(--mint-500); }
.effect--band { border-color: var(--mint-800); }
.effect--team { border-color: rgba(78, 216, 175, .6); }
.effect__n { position: absolute; right: -.05rem; bottom: -.05rem; min-width: .2rem; font-size: .12rem; line-height: 1.4; text-align: center; background: var(--gold); color: #1d1400; padding: 0 .03rem; }
.efftip { display: flex; flex-direction: column; gap: .04rem; max-width: 3.6rem; }
.efftip b { font-size: .17rem; color: var(--mint-400); }
.efftip__kind { font-size: .12rem; color: var(--text-dim); }
.efftip p { font-size: .15rem; line-height: 1.55; color: var(--text-md); }

/* ---- corner: emote + settings --------------------------------------------------------------------------------- */
.gm__corner { position: absolute; left: .24rem; bottom: .24rem; display: flex; align-items: flex-end; gap: .1rem; }
.gm__gear {
  width: .56rem; height: .56rem; display: grid; place-items: center; background: rgba(8, 11, 10, .85);
  border: 1px solid var(--line-2); color: var(--text-lo); transition: color var(--t-fast), border-color var(--t-fast);
}
.gm__gear .icon { width: .28rem; height: .28rem; }
.gm__gear:hover { color: var(--mint-400); border-color: var(--mint-700); }

.gm__metrics[aria-expanded="true"], .gm__damage[aria-expanded="true"] { color: var(--mint-400); border-color: var(--mint-700); background: var(--mint-900); }

/* Local damage breakdown, docked above the corner next to the settings buttons. */
.damage-stats {
  position: absolute; left: 0; bottom: calc(100% + max(.1rem, 8px)); z-index: 12;
  width: min(max(4.8rem, 300px), calc(100vw - var(--sa-l, 0px) - var(--sa-r, 0px) - .48rem));
  max-height: min(max(5rem, 360px), calc(100vh - 2rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(24, 32, 29, .98), rgba(13, 18, 16, .98));
  border: 1px solid var(--line-2); border-top: 2px solid var(--mint-700);
  box-shadow: 0 .12rem .4rem rgba(0, 0, 0, .6); color: var(--text-md);
  font-size: max(calc(.13 * var(--t)), 11px); line-height: 1.35; text-align: left;
}
.damage-stats__head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; padding: max(.09rem, 7px) max(.12rem, 9px) 0; }
.damage-stats__micro { display: block; font-family: var(--font-display); font-size: max(calc(.09 * var(--t)), 9px); letter-spacing: .12em; color: var(--mint-500); }
.damage-stats__head h2 { margin: 0; font-size: max(calc(.18 * var(--t)), 14px); color: var(--text-hi); }
.damage-stats__close { display: grid; place-items: center; flex: none; width: max(.3rem, 28px); height: max(.3rem, 28px); color: var(--text-md); border: 1px solid var(--line-2); background: var(--bg-1); }
.damage-stats__close .icon { width: max(.16rem, 14px); height: max(.16rem, 14px); }
.damage-stats__scopes { display: flex; flex: none; gap: 4px; padding: max(.07rem, 6px) max(.12rem, 9px) 0; }
.damage-stats__scopes button { flex: 1; min-width: 0; min-height: 28px; padding: 3px 5px; color: var(--text-lo); background: var(--bg-1); border: 1px solid var(--line-2); font-size: max(calc(.11 * var(--t)), 10px); white-space: nowrap; }
.damage-stats__scopes button[aria-pressed="true"] { background: var(--mint-900); color: var(--mint-400); border-color: var(--mint-700); }
.damage-stats__total { display: flex; flex: none; align-items: baseline; gap: 6px; padding: max(.08rem, 7px) max(.12rem, 9px); border-bottom: 1px solid var(--line); }
.damage-stats__total span { color: var(--text-lo); }
.damage-stats__total b { color: var(--mint-400); font-family: var(--font-num); font-size: max(calc(.22 * var(--t)), 18px); }
.damage-stats__total small { margin-left: auto; color: var(--text-dim); font-size: max(calc(.1 * var(--t)), 9px); }
.damage-stats__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.damage-stats__list { display: flex; flex-direction: column; margin: 0; padding: max(.07rem, 6px) max(.12rem, 9px) max(.04rem, 4px); gap: max(.07rem, 6px); list-style: none; }
.damage-stats__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 3px 8px; }
.damage-stats__row--phys { --damage-color: #f6a329; }
.damage-stats__row--arts { --damage-color: #9fd4ff; }
.damage-stats__row--elemental { --damage-color: #cf9fff; }
.damage-stats__row--true { --damage-color: #ff7272; }
.damage-stats__type { display: inline-flex; align-items: center; gap: 5px; color: var(--text-hi); }
.damage-stats__type i { width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--damage-color); box-shadow: 0 0 .08rem color-mix(in srgb, var(--damage-color) 55%, transparent); }
.damage-stats__row b { color: var(--text-hi); font-family: var(--font-num); font-size: max(calc(.16 * var(--t)), 13px); }
.damage-stats__row small { min-width: 3.4em; color: var(--text-dim); text-align: right; font-family: var(--font-num); font-size: max(calc(.1 * var(--t)), 9px); }
.damage-stats__bar { grid-column: 1 / -1; height: 4px; overflow: hidden; background: rgba(255, 255, 255, .06); border-radius: 99px; }
.damage-stats__bar i { display: block; height: 100%; background: var(--damage-color); border-radius: inherit; transition: width var(--t-fast) linear; }
.damage-stats__sources-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 max(.12rem, 9px); padding: max(.07rem, 6px) 0 max(.03rem, 3px); border-top: 1px solid var(--line); color: var(--mint-400); font-size: max(calc(.12 * var(--t)), 10px); font-weight: 700; }
.damage-stats__sources-head small { color: var(--text-dim); font-family: var(--font-num); font-weight: 400; }
.damage-stats__sources { display: flex; flex-direction: column; margin: 0; padding: 0 max(.12rem, 9px) max(.06rem, 5px); list-style: none; }
.damage-stats__source { display: flex; align-items: center; gap: 6px; min-width: 0; padding: max(.045rem, 4px) 0; border-top: 1px solid rgba(255, 255, 255, .055); }
.damage-stats__source .uthumb { flex: none; }
.damage-stats__source-main { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.damage-stats__source-name { overflow: hidden; color: var(--text-hi); font-size: max(calc(.13 * var(--t)), 11px); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.damage-stats__source-types { display: flex; flex-wrap: wrap; gap: 1px 7px; }
.damage-stats__mini { display: inline-flex; align-items: center; gap: 3px; color: var(--text-dim); font-size: max(calc(.09 * var(--t)), 8px); white-space: nowrap; }
.damage-stats__mini i { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--damage-color); }
.damage-stats__mini b { color: var(--text-md); font-family: var(--font-num); font-weight: 600; }
.damage-stats__mini--phys { --damage-color: #f6a329; }
.damage-stats__mini--arts { --damage-color: #9fd4ff; }
.damage-stats__mini--elemental { --damage-color: #cf9fff; }
.damage-stats__mini--true { --damage-color: #ff7272; }
.damage-stats__source-damage { flex: none; color: var(--mint-400); font-family: var(--font-num); font-size: max(calc(.18 * var(--t)), 16px); font-weight: 800; text-align: right; text-shadow: 0 0 .14rem rgba(70, 240, 184, .22); }
.damage-stats__source-empty { padding: max(.08rem, 7px) 0; color: var(--text-dim); font-size: max(calc(.11 * var(--t)), 9px); }
.damage-stats__note { flex: none; margin: 0; padding: 0 max(.12rem, 9px) max(.08rem, 7px); color: var(--text-dim); font-size: max(calc(.09 * var(--t)), 8px); }

/* Local combat meter, docked above the corner's actual height (including mobile wrapped rows). */
.combat-metrics {
  --bk-c: var(--mint-500);
  position: absolute; left: 0; bottom: calc(100% + max(.1rem, 8px)); z-index: 12;
  width: min(max(5.2rem, 340px), calc(100vw - var(--sa-l, 0px) - var(--sa-r, 0px) - .48rem));
  max-height: min(max(6.6rem, 280px), calc(100vh - var(--combat-corner-height, 110px) - max(.9rem, 48px) - .34rem - var(--sa-t, 0px) - var(--sa-b, 0px)));
  max-height: min(max(6.6rem, 280px), calc(100dvh - var(--combat-corner-height, 110px) - max(.9rem, 48px) - .34rem - var(--sa-t, 0px) - var(--sa-b, 0px)));
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(28, 35, 32, .98), rgba(17, 21, 19, .98));
  border: 1px solid var(--line-2); border-top: 2px solid var(--mint-700);
  box-shadow: 0 .12rem .4rem rgba(0, 0, 0, .6); color: var(--text-md);
  font-size: max(calc(.14 * var(--t)), 12px); line-height: 1.35; text-align: left;
}
.combat-metrics__head { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 8px; padding: max(.1rem, 8px) max(.14rem, 10px) 0; }
.combat-metrics__micro { font-family: var(--font-display); font-size: max(calc(.1 * var(--t)), 10px); letter-spacing: .12em; color: var(--mint-500); }
.combat-metrics__head h2 { margin: 0; font-size: max(calc(.2 * var(--t)), 16px); color: var(--text-hi); }
.combat-metrics__body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; }
.combat-metrics__close { display: grid; place-items: center; flex: none; width: max(.36rem, 32px); height: max(.36rem, 32px); color: var(--text-md); border: 1px solid var(--line-2); background: var(--bg-1); }
.combat-metrics__close .icon { width: max(.18rem, 16px); height: max(.18rem, 16px); }
.combat-metrics__tools { display: flex; flex: none; gap: 8px; padding: 8px max(.14rem, 10px); }
.combat-metrics__head > .combat-metrics__tools { flex-basis: 100%; padding-left: 0; padding-right: 0; }
.combat-metrics__scopes { display: flex; flex: 1; min-width: 0; }
.combat-metrics__scopes button { flex: 1; min-width: 0; padding: 4px 6px; min-height: 32px; color: var(--text-lo); background: var(--bg-1); border: 1px solid var(--line-2); white-space: nowrap; font-size: inherit; }
.combat-metrics__scopes button[aria-pressed="true"] { background: var(--mint-900); color: var(--mint-400); border-color: var(--mint-700); }
.combat-metrics__totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: none; gap: 8px; padding: 0 max(.14rem, 10px) 8px; }
.combat-metrics__totals span { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; color: var(--text-lo); }
.combat-metrics__totals b { font-family: var(--font-num); color: var(--text-hi); font-size: max(calc(.18 * var(--t)), 14px); overflow-wrap: anywhere; }
.combat-metrics__totals span:last-child b { color: var(--mint-400); }
.combat-metrics__legend { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0 max(.14rem, 10px) 8px; font-size: max(calc(.12 * var(--t)), 11px); }
.combat-metrics__type { display: inline-flex; align-items: center; gap: 4px; }
.combat-metrics__type::before { content: ''; width: 10px; height: 4px; background: var(--damage-color); }
.combat-metrics__type--phys, .combat-metrics__segment--phys { --damage-color: #f6a329; }
.combat-metrics__type--arts, .combat-metrics__segment--arts { --damage-color: #9fd4ff; }
.combat-metrics__type--true, .combat-metrics__segment--true { --damage-color: #ff7272; }
.combat-metrics__type--elemental, .combat-metrics__segment--elemental { --damage-color: #cf9fff; }
.combat-metrics__sort { margin-left: auto; color: var(--text-lo); }
.combat-metrics__list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0 max(.14rem, 10px); list-style: none; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.combat-metrics__row { display: grid; grid-template-columns: max(.2rem, 18px) max(.42rem, 30px) minmax(0, 1fr); gap: max(.08rem, 6px); align-items: center; padding: max(.09rem, 7px) 0; border-top: 1px solid var(--line); }
.combat-metrics__rank { align-self: start; color: var(--text-lo); font-family: var(--font-num); padding-top: 2px; }
.combat-metrics__row > .uthumb { width: max(.42rem, 30px); height: max(.42rem, 30px); }
.combat-metrics__unit { min-width: 0; }
.combat-metrics__name { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.combat-metrics__name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-hi); }
.combat-metrics__bar { display: flex; width: 100%; height: max(.05rem, 5px); margin: 5px 0; background: var(--bg-4); overflow: hidden; }
.combat-metrics__segment { flex: none; height: 100%; background: var(--damage-color); }
.combat-metrics__values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.combat-metrics__values span { min-width: 0; display: flex; flex-direction: column; }
.combat-metrics__values small { color: var(--text-lo); font-size: max(calc(.1 * var(--t)), 10px); }
.combat-metrics__values b { color: var(--text-hi); overflow-wrap: anywhere; font-size: max(calc(.14 * var(--t)), 12px); font-weight: 500; }
.combat-metrics__values .combat-metrics__heal b { color: var(--mint-400); }
.combat-metrics__empty { padding: 20px 8px; color: var(--text-md); text-align: center; }
.combat-metrics__empty small { display: inline-block; margin-top: 6px; color: var(--text-lo); }
.combat-metrics__note { flex: none; margin: 0; padding: 8px max(.14rem, 10px); border-top: 1px solid var(--line); color: var(--text-lo); font-size: max(calc(.1 * var(--t)), 10px); }
.combat-metrics button:hover { color: var(--mint-400); border-color: var(--mint-700); }
.combat-metrics button:focus-visible { outline: 2px solid var(--mint-400); outline-offset: -2px; }
@media (pointer: coarse), (any-pointer: coarse) {
  .combat-metrics__close, .combat-metrics__scopes button { min-height: 44px; }
  .combat-metrics__close { min-width: 44px; }
}
@media (max-height: 460px) {
  .combat-metrics__body { display: block; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
  .combat-metrics__list { overflow: visible; }
  .combat-metrics__micro { display: none; }
  .combat-metrics__head { padding-top: 4px; }
  .combat-metrics__tools { padding-top: 4px; padding-bottom: 4px; }
  .combat-metrics__totals, .combat-metrics__legend { padding-bottom: 4px; }
  .combat-metrics__note { padding-top: 4px; padding-bottom: 4px; }
  .combat-metrics__note br { display: none; }
}

.ewheel { position: relative; }
.ewheel__btn {
  display: flex; align-items: center; gap: .08rem; height: .56rem; padding: 0 .2rem 0 .14rem;
  background: rgba(8, 11, 10, .85); border: 1px solid var(--line-2); color: var(--text-md); font-size: .18rem; font-weight: 700; letter-spacing: .1em;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.ewheel__btn .icon { width: .3rem; height: .3rem; color: var(--mint-500); }
.ewheel__btn:hover, .ewheel__btn.is-on { color: var(--mint-400); border-color: var(--mint-700); }
.ewheel__btn:disabled { opacity: .5; cursor: not-allowed; }
.ewheel__panel {
  position: absolute; left: 0; bottom: calc(100% + .12rem); width: 4.1rem; padding: .14rem .16rem .16rem;
  background: linear-gradient(180deg, rgba(20, 26, 24, .97), rgba(10, 14, 12, .97)); border: 1px solid var(--line-2);
  box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .6);
  animation: pop-in var(--t-med) var(--ease-out);
}
.ewheel__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .08rem; margin-top: .12rem; }
.ewheel__item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .02rem; padding: .06rem .02rem .05rem;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--line); font-size: .12rem; color: var(--text-lo);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.ewheel__item:hover:not(:disabled) { background: var(--mint-a10); border-color: var(--mint-700); color: var(--mint-400); transform: translateY(-.02rem); }
.ewheel__item:disabled { opacity: .45; cursor: default; }
.ewheel__art { width: .6rem; height: .6rem; display: grid; place-items: center; }
.ewheel__art:empty { display: none; }
.ewheel__art .eart { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 .06rem rgba(23, 249, 183, .25)); }
.ewheel__txt { white-space: nowrap; }
.ewheel__panel.is-text .ewheel__grid { grid-template-columns: repeat(3, 1fr); }
.ewheel__panel.is-text .ewheel__item { padding: .12rem .04rem; font-size: .15rem; color: var(--text-md); }
@keyframes pop-in { from { opacity: 0; transform: translateY(.08rem) scale(.97); } }

/* speech bubble next to a team row: official emote art (+ phrase), or the phrase alone */
.ebubble {
  display: flex; align-items: center; gap: .06rem; padding: .05rem .14rem .05rem .2rem; white-space: nowrap;
  background: rgba(22, 28, 26, .96); color: var(--text-hi); font-size: .15rem; font-weight: 700;
  border: 1px solid rgba(78, 216, 175, .45);
  clip-path: polygon(.1rem 0, 100% 0, 100% 100%, .1rem 100%, .1rem 62%, 0 50%, .1rem 38%);
  animation: bubble-in 150ms var(--ease-out), bubble-out 300ms var(--ease-in-out) 2.7s forwards;
  filter: drop-shadow(0 .04rem .1rem rgba(0, 0, 0, .55));
  z-index: 2;
}
.ebubble--art { padding: .02rem .14rem .02rem .16rem; }
.ebubble .eart { width: .62rem; height: .62rem; object-fit: contain; }
.ebubble__txt { color: var(--mint-400); }
.ebubble--text { background: rgba(236, 244, 241, .96); border: 0; }
.ebubble--text .ebubble__txt { color: #0b1310; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(-50%) scale(.6); } }
@keyframes bubble-out { to { opacity: 0; } }

/* ---- ticker -------------------------------------------------------------------------------------------- */
/* a slim strip hugging the bottom of the top bar; the bond strip starts right below it (.gm__bonds top) */
.ticker { position: absolute; top: 1.0rem; left: 50%; transform: translateX(-50%); width: 7.6rem; height: .3rem; overflow: hidden; pointer-events: none; z-index: 4; }
/* hot update notice (buildGuard ui.buildStale), shown while an updated build waits for the match to end */
.hotupdate {
  position: fixed; top: 1.42rem; left: 50%; transform: translateX(-50%); z-index: 85;
  display: flex; align-items: center; gap: .1rem; padding: .07rem .1rem .07rem .14rem;
  color: var(--mint-400); background: rgba(7, 20, 16, .96); border: 1px solid rgba(64, 224, 160, .5);
  border-radius: 8px; box-shadow: 0 .08rem .28rem rgba(0, 0, 0, .55), 0 0 .24rem rgba(64, 224, 160, .12);
  max-width: calc(100vw - 16px); pointer-events: auto; animation: pop-in var(--t-med) var(--ease-out);
}
.hotupdate__dot { width: .16rem; height: .16rem; flex: none; border-radius: 50%; background: #46f0b8; box-shadow: 0 0 .14rem rgba(70, 240, 184, .8); animation: hotupdate-pulse 1.8s ease-in-out infinite; }
.hotupdate__text { display: flex; flex-direction: column; gap: .01rem; line-height: 1.25; }
.hotupdate__text b { color: #d9fff5; font-size: calc(.15 * var(--t)); }
.hotupdate__text small { color: var(--text-dim); font-size: max(calc(.11 * var(--t)), 9px); }
.hotupdate__btn { flex: none; height: .34rem; padding: 0 .14rem; margin-left: .04rem; color: #05241d; background: linear-gradient(180deg, #8ff8dc, #27b892); border: 1px solid rgba(159, 248, 223, .75); border-radius: 5px; font: inherit; font-size: max(calc(.12 * var(--t)), 9px); font-weight: 800; cursor: pointer; }
.hotupdate__btn:hover { filter: brightness(1.08); }
@keyframes hotupdate-pulse { 0%, 100% { opacity: .65; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .hotupdate, .hotupdate__dot { animation: none; }
}
.ticker__line {
  position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center; gap: .1rem; white-space: nowrap;
  padding: 0 .24rem; font-size: .16rem; color: var(--text-hi);
  background: linear-gradient(90deg, transparent, rgba(10, 14, 12, .97) 10%, rgba(10, 14, 12, .97) 90%, transparent);
  border-top: 1px solid rgba(255, 198, 0, .35); border-bottom: 1px solid rgba(255, 198, 0, .35);
  animation: ticker-in 420ms var(--ease-out), ticker-out 380ms var(--ease-in-out) 4.8s forwards;
  left: 0; justify-content: center;
}
.ticker__icon { width: .22rem; height: .22rem; color: var(--gold); flex: none; }
@keyframes ticker-in { from { transform: translateX(80%); opacity: 0; } }
@keyframes ticker-out { to { transform: translateX(-40%); opacity: 0; } }

/* ---- watching / dead / combat hud ------------------------------------------------------------------------------ */
/* scouting a teammate's board in prep: the shop bar is hidden, the pill takes its place */
.gm__watching {
  position: absolute; left: 50%; bottom: .4rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .14rem; padding: .06rem .08rem .06rem .18rem;
  background: rgba(24, 16, 4, .92); border: 1px solid rgba(246, 163, 41, .6); color: var(--text-hi); font-size: .17rem;
}
.gm__watching > .icon { width: .24rem; height: .24rem; color: var(--amber); }
.gm__watching b { color: var(--amber); }
.gm__dead {
  position: absolute; left: 50%; bottom: 3.1rem; transform: translateX(-50%); display: flex; align-items: center; gap: .1rem;
  padding: .1rem .26rem; background: rgba(40, 8, 6, .9); border: 1px solid rgba(255, 84, 84, .5); color: var(--red-premium); font-size: .18rem; font-weight: 700;
}
.gm__dead .icon { width: .22rem; height: .22rem; }
/* a spectator seat (community report #26): the same place, the watching pill's amber — nobody was eliminated */
.gm__dead--spectator { background: rgba(24, 16, 4, .92); border-color: rgba(246, 163, 41, .6); color: var(--amber); }

.chud { position: absolute; inset: 0; pointer-events: none; }
.chud > * { pointer-events: auto; }
.dpbox {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .02rem; padding: .1rem .12rem;
  background: rgba(8, 11, 10, .85); border: 1px solid var(--line-2); border-right: 3px solid var(--mint-500);
}
.dpbox__icon { width: .26rem; height: .26rem; color: var(--mint-500); }
.dpbox b { font-size: .34rem; line-height: 1; color: #fff; }
.chud__bottom { position: absolute; left: 50%; bottom: .3rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .12rem; pointer-events: none; }
.chud__bottom > * { pointer-events: auto; }
.chud__msg {
  display: flex; align-items: center; gap: .1rem; padding: .1rem .3rem; font-size: .19rem; color: var(--text-hi);
  background: rgba(8, 11, 10, .9); border: 1px solid var(--line-2); border-radius: .3rem; white-space: nowrap;
  animation: pop-in var(--t-slow) var(--ease-out);
}
/* a still hourglass: a rotating one next to the text read as a loading spinner (user playtest #3 item 9) */
.chud__msg .icon { width: .22rem; height: .22rem; color: var(--gold); }
.chud__msg--dead { border-color: rgba(255, 84, 84, .5); color: var(--red-premium); }
.chud__msg--dead .icon { color: var(--red-premium); }
.vswitch { display: flex; align-items: center; gap: .1rem; height: .5rem; padding: 0 .06rem; background: rgba(8, 11, 10, .9); border: 1px solid var(--line-2); }
.vswitch__arrow { width: .4rem; height: .4rem; display: grid; place-items: center; background: none; border: 0; color: var(--mint-500); }
.vswitch__arrow .icon { width: .3rem; height: .3rem; }
.vswitch__arrow:hover:not(:disabled) { color: var(--mint-400); background: var(--mint-a10); }
.vswitch__arrow:disabled { color: var(--text-dim); cursor: default; }
.vswitch__label { min-width: 1.6rem; text-align: center; font-size: .2rem; font-weight: 700; letter-spacing: .12em; }
.vswitch.is-single .vswitch__arrow { visibility: hidden; }
/* client-side combat (ui/combatHud.js, research 09 §3.1): waiting pill + teammates' progress, observing pill, ‹ › halves */
.chud__wait { border-color: rgba(255, 198, 0, .45); }
.chud__progress { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem .18rem; max-width: 9rem; font-size: .15rem; color: var(--text-md); }
.chud__prog {
  display: inline-flex; align-items: center; gap: .08rem; padding: .03rem .12rem; background: rgba(8, 11, 10, .82);
  border: 1px solid rgba(78, 216, 175, .25); border-left: 3px solid var(--gold);
}
.chud__prog b { font-weight: 500; max-width: 1.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chud__prog .num { color: var(--gold); font-size: .16rem; }
.chud__prog.is-done { border-left-color: var(--mint-500); }
.chud__prog__ok { color: var(--mint-400); font-weight: 900; }
.chud__observe { gap: .14rem; padding: 0 .08rem 0 .16rem; border-color: rgba(246, 163, 41, .55); }
.chud__observe .vswitch__label, .chud__layers .vswitch__label { display: inline-flex; align-items: center; justify-content: center; gap: .08rem; }
.chud__observe .vswitch__label .icon { width: .24rem; height: .24rem; color: var(--amber); }
.chud__layers .vswitch__label .icon { width: .22rem; height: .22rem; color: var(--amber); }
.chud__back { flex: none; }
.chud__layers { border-color: var(--mint-700); }
/* a 联防 / 最终攻势 field watched with 前往查看: the ‹ › pill carries 返回战场 (DESIGN §20.15) */
.chud__layers.is-observing { gap: .1rem; padding-right: .08rem; border-color: rgba(246, 163, 41, .55); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- settings modal ------------------------------------------------------------------------------------------------ */
/* the 设置 trigger of the lobby and the room (ui/settings.js SettingsButton, GitHub #238): the 玩法说明 button's twin; its gear sits
   inside the label, so the label lays glyph and text out like the button itself */
.settings-btn .btn__label { display: inline-flex; align-items: center; gap: .1rem; }
.settings-btn .btn__icon { color: var(--mint-500); }
/* square (the lobby's gear alone): the label box drops out so the gear sizes and centres against the button, like an `icon` */
.settings-btn.btn--square .btn__label { display: contents; }
.settings-btn.btn--square .btn__icon { width: 62%; height: 62%; } /* the gear glyph is drawn smaller in its box than the book */
.set-list { display: flex; flex-direction: column; gap: .16rem; padding-top: .06rem; }
.set-row { display: grid; grid-template-columns: minmax(0, 3.3rem) minmax(0, 1fr) auto; align-items: center; gap: .18rem; min-height: .44rem; }
/* The label column may shrink (the label wraps) instead of pushing its control out of the modal: at 设置 →「文字大小」
   大 / 特大 a phone's label (a Chinese name plus its Latin micro label) is wider than 3.3rem at 1rem = 40 px. */
.set-row__label { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; font-size: calc(.18 * var(--t)); color: var(--text-hi); }
.set-row__label .icon { width: .2rem; height: .2rem; color: var(--mint-500); }
.set-row__label .micro { margin-left: .04rem; }
/* a floor, not a fixed width: the %. value grows with the text step (20 px on a phone, 3 digits at 特大) */
.set-row__val { min-width: .5rem; text-align: right; font-size: calc(.2 * var(--t)); color: var(--mint-400); }
.set-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: .08rem; background: linear-gradient(90deg, var(--mint-500) var(--pct), #0a0d0c var(--pct));
  border: 1px solid var(--line-2); outline: none; cursor: pointer;
}
.set-range::-webkit-slider-thumb { -webkit-appearance: none; width: .2rem; height: .26rem; background: var(--mint-400); clip-path: polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%); cursor: grab; }
.set-range::-moz-range-thumb { width: .2rem; height: .26rem; background: var(--mint-400); border: 0; }
.set-toggle { grid-column: 2 / 4; justify-self: start; display: flex; align-items: center; gap: .1rem; height: .38rem; padding: 0 .14rem 0 .06rem; background: #0a0d0c; border: 1px solid var(--line-2); color: var(--text-lo); font-size: calc(.15 * var(--t)); }
.set-toggle i { width: .46rem; height: .24rem; background: var(--bg-3); position: relative; transition: background var(--t-fast); }
.set-toggle i::after { content: ''; position: absolute; left: .03rem; top: .03rem; width: .18rem; height: .18rem; background: var(--text-lo); transition: transform var(--t-fast), background var(--t-fast); }
.set-toggle.is-on { color: var(--mint-400); border-color: var(--mint-700); }
.set-toggle.is-on i { background: var(--mint-800); }
.set-toggle.is-on i::after { transform: translateX(.22rem); background: var(--mint-400); }
.set-seg { grid-column: 2 / 4; justify-self: start; display: flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--line-2); }
/* 语音语言: the four endonyms plus the 本土语言 switch. A flex wrap left 한국어 on a row of its own (four .8rem
   minima squeezed by the switch). The group wraps its four buttons four across or two by two, never 3 + 1: each
   button's basis is clamp(25 %, (2.4rem − 100 %) × 999, 50 %) of the group — hugely negative (→ 25 %, four across)
   while the group is wider than 2.4rem, hugely positive (→ 50 %, two by two) below it. The group's 1 px gaps over
   its line-coloured background draw the dividers in both layouts. No container query (the CSS stays within the
   supported browsers, test/client-static.test.js).
   [ASSUMED] 2.4rem of the group (about 0.6rem a button): the usual control column (desktop, and a phone around
   844 px where 1rem is 40 px) is wider, so the four names stay on one row beside 本土语言. */
.set-voice { grid-column: 2 / 4; justify-self: stretch; display: flex; flex-wrap: nowrap; align-items: stretch; gap: .08rem; max-width: 100%; min-width: 0; }
.set-voice .set-seg { grid-column: auto; flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 1px; min-width: 0; background: var(--line-2); }
.set-voice .set-seg button { min-width: 0; padding: 0 .04rem; overflow-wrap: anywhere; border-right: 0; flex: 1 1 clamp(calc(25% - 1px), (2.4rem - 100%) * 999, calc(50% - 1px)); }
.set-native { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: .38rem; padding: 0 .12rem; background: #0a0d0c; border: 1px solid var(--line-2); color: var(--text-lo); font-size: calc(.16 * var(--t)); cursor: pointer; }
.set-native.is-on { background: var(--mint-500); color: var(--text-on-mint); font-weight: 700; }
.set-seg button { flex: 1 1 auto; min-width: .8rem; min-height: .38rem; height: auto; white-space: normal; background: #0a0d0c; border: 0; border-right: 1px solid var(--line-2); color: var(--text-lo); font-size: calc(.16 * var(--t)); }
/* 文字大小 (ui/settings.js): four steps, so its buttons are narrower than the two- and three-step groups' — at .8rem each
   the group would be wider than the row's 1fr column on a phone (1rem = 40 px) */
.set-seg.set-textsize button { min-width: .62rem; }
.set-seg button:last-child { border-right: 0; }
.set-seg button.is-on { background: var(--mint-500); color: var(--text-on-mint); font-weight: 700; }
.set-hint { margin-top: .06rem; font-size: calc(.14 * var(--t)); color: var(--text-dim); line-height: 1.8; }
.set-hint kbd, .lvcard__key, .toolbtn kbd { font-family: var(--font-num); font-size: .11rem; border: 1px solid var(--line-2); padding: 0 .04rem; color: var(--text-lo); background: rgba(0, 0, 0, .3); }
/* 快捷键 (ui/settings.js HotkeySection): each shortcut with its key — click the key, press the new one; two columns,
   one under 768 px (phones in landscape) */
.set-keys { display: flex; flex-direction: column; gap: .08rem; padding-top: .1rem; border-top: 1px solid var(--line); }
/* 外观插件 (DESIGN §32 P1a, ui/settings.js CosmeticSection): laid out like 快捷键 — a head, a hint, one switch per plugin */
.set-plugins { display: flex; flex-direction: column; gap: .08rem; padding-top: .1rem; border-top: 1px solid var(--line); }
.set-theme-win { margin: 0; font-family: var(--font-num); color: var(--text-lo); overflow-wrap: anywhere; }
.set-keys__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .12rem; min-height: .44rem; }
.set-keys__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .06rem .14rem; margin: 0; padding: 0; list-style: none; }
.set-keys__row { display: flex; align-items: center; justify-content: space-between; gap: .1rem; min-height: .42rem; padding: .03rem .03rem .03rem .12rem; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); }
.set-keys__name { min-width: 0; font-size: calc(.15 * var(--t)); line-height: 1.35; color: var(--text-md); overflow-wrap: anywhere; }
.set-key { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .06rem; min-width: .9rem; height: .36rem; padding: 0 .1rem; background: #0a0d0c; border: 1px solid var(--line-2); color: var(--mint-400); font-family: var(--font-num); font-size: calc(.15 * var(--t)); cursor: pointer; }
.set-key kbd { font: inherit; }
.set-key:hover, .set-key:focus-visible { border-color: var(--mint-700); }
.set-key.is-waiting { border-color: var(--amber); color: var(--amber); font-family: inherit; font-size: calc(.13 * var(--t)); animation: set-key-wait 1s ease-in-out infinite alternate; }
.set-key.is-fixed { cursor: default; color: var(--text-lo); border-style: dashed; }
.set-key.is-fixed small { font-family: inherit; font-size: calc(.12 * var(--t)); color: var(--text-dim); }
.set-keys__note { min-height: 1.5em; font-size: calc(.14 * var(--t)); line-height: 1.5; color: var(--mint-400); }
.set-keys__note.is-warn { color: var(--amber); }
.set-keys__more > summary { padding: .06rem 0; font-size: calc(.15 * var(--t)); color: var(--mint-400); cursor: pointer; }
.set-keys__more[open] > summary { margin-bottom: .08rem; }
@keyframes set-key-wait { to { box-shadow: 0 0 .12rem rgba(246, 163, 41, .45); } }
/* 素材存储 (ui/settings.js StorageSection): laid out like 问题反馈 below it — a head with its button, a hint, the answer */
.set-storage { display: flex; flex-direction: column; gap: .08rem; padding-top: .1rem; border-top: 1px solid var(--line); }
.set-storage__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .08rem; }
/* 问题反馈 (ui/settings.js DiagSection): laid out like 快捷键 — a head with its button, a hint, the result line; the
   recorded-error count in the figure face of the slider values (amber once there is one); the report box only when the
   clipboard refused it, styled like 干员调配's 导出 box (screens/loadout.css .lo-io__text) */
.set-diag { display: flex; flex-direction: column; gap: .08rem; padding-top: .1rem; border-top: 1px solid var(--line); }
.set-diag__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .04rem .2rem; }
.set-diag__stat { display: inline-flex; align-items: baseline; gap: .1rem; font-size: calc(.14 * var(--t)); color: var(--text-lo); }
.set-diag__count { font-family: var(--font-num); font-size: calc(.2 * var(--t)); line-height: 1; color: var(--mint-400); }
.set-diag__count.is-warn { color: var(--amber); }
.set-diag__url { min-width: 0; font-size: calc(.13 * var(--t)); color: var(--text-dim); overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.set-diag__battle-hint { margin-top: -.06rem; }
.set-diag__text {
  box-sizing: border-box; width: 100%; height: max(2rem, 140px); min-height: 120px; resize: vertical;
  padding: max(.1rem, 8px) max(.12rem, 10px);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: max(.13rem, 11px); line-height: 1.5;
  color: var(--text-hi); background: rgba(4, 10, 8, .55); border: 1px solid var(--line-2); border-radius: 2px; outline: none;
  white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto;
}
.set-diag__text:focus { border-color: var(--mint-700); }
/* touch: 16 px, below which iOS zooms into the focused box (as 干员调配's 导出 box and ui/clipboard.js) */
.sp-coarse .set-diag__text { font-size: 16px; }
@media (max-width: 767px) { .set-keys__list { grid-template-columns: minmax(0, 1fr); } }
@media (max-height: 600px) and (pointer: coarse), (max-height: 600px) and (any-pointer: coarse) {
  .set-key { height: max(.38rem, 30px); }
  .set-keys__more > summary { padding: max(.06rem, 8px) 0; }
}

/* ---- exit / away ------------------------------------------------------------------------------------------------------ */
.exitm { display: flex; flex-direction: column; gap: .1rem; font-size: calc(.17 * var(--t)); line-height: 1.7; }
.awayov { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(4, 7, 6, .78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: screen-in var(--t-slow) var(--ease-out); }
.awayov__box { display: flex; flex-direction: column; align-items: center; gap: .12rem; padding: .44rem .7rem; background: rgba(12, 16, 14, .96); border: 1px solid var(--line-2); }
.awayov__icon { width: .8rem; height: .8rem; color: var(--ice); filter: drop-shadow(0 0 .2rem rgba(159, 212, 255, .5)); }
.awayov__box h2 { font-size: calc(.34 * var(--t)); letter-spacing: .12em; }

/* ---- simplified (DOM) field view ---------------------------------------------------------------------------------------- */
.ff { position: absolute; inset: 0; overflow: hidden; user-select: none; }
.ff::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 45% 48%, rgba(40, 60, 52, .35), transparent 70%); }
.ff-board { position: absolute; }
.ff-tile, .ff-slot, .ff-piece, .ff-unit { position: absolute; left: 0; top: 0; }
.ff-tile { box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .35); }
.ff-tile--floor { background: linear-gradient(180deg, #3d4843, #333d38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.ff-tile--high { background: linear-gradient(180deg, #5d6a64, #4a5651); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), inset 0 -4px 0 rgba(0, 0, 0, .25); }
.ff-tile--lane { background: linear-gradient(180deg, #2b322f, #252c29); }
.ff-tile--void { background: transparent; border-color: transparent; }
.ff-tile--gate { background: radial-gradient(circle, rgba(255, 60, 40, .6), rgba(120, 20, 10, .5)); border: 2px solid #ff4a2e; animation: gate-pulse 1.4s ease-in-out infinite; }
.ff-tile--goal { background: radial-gradient(circle, rgba(60, 160, 255, .55), rgba(10, 50, 120, .5)); border: 2px solid #4ab0ff; }
.ff-tile--mire { background: linear-gradient(180deg, #4a4030, #3c3326); }
.ff-tile--smog { background: linear-gradient(180deg, #4a4a52, #3a3a42); }
.ff-tile--deep { background: linear-gradient(180deg, #1e3a52, #173045); }
.ff-tile--infect { background: linear-gradient(180deg, #4a2a3a, #3a2030); }
.ff-tile.is-legal { box-shadow: inset 0 0 0 2px rgba(89, 244, 202, .8), inset 0 0 calc(var(--tile) * .4) rgba(23, 249, 183, .3); }
.ff-tile.is-illegal { box-shadow: inset 0 0 0 2px rgba(255, 84, 84, .5); }
.ff-tile.is-range { box-shadow: inset 0 0 0 2px rgba(246, 163, 41, .7); }
.ff-tile.is-hover-legal { background: rgba(78, 216, 175, .45); }
.ff-tile.is-hover-illegal { background: rgba(255, 60, 60, .4); }
@keyframes gate-pulse { 50% { box-shadow: 0 0 calc(var(--tile) * .4) rgba(255, 60, 40, .8); } }
.ff-hand-label { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: .1rem; font-size: .13rem; color: var(--text-dim); letter-spacing: .2em; }
.ff-hand-label i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.ff-slot { box-sizing: border-box; border: 2px dashed rgba(170, 140, 90, .45); background: rgba(120, 90, 50, .16); display: grid; place-items: end start; }
.ff-slot span { font-size: .11rem; color: rgba(210, 180, 130, .5); padding: 0 .03rem; }
.ff-slot--temp { border-color: rgba(255, 122, 51, .6); background: rgba(232, 90, 26, .12); }
.ff-slot.is-hover-legal { background: rgba(78, 216, 175, .35); border-color: var(--mint-400); }
.ff-slot.is-hover-illegal { background: rgba(255, 60, 60, .3); }
.ff-piece { transition: transform 160ms var(--ease-out); z-index: 2; }
.ff-piece.is-draggable { cursor: grab; }
.ff-piece.is-lifted { opacity: .25; }
.ff-piece__art {
  position: absolute; inset: 7%; overflow: hidden; display: grid; place-items: center; background: #1a201d;
  border: 2px solid rgba(255, 255, 255, .22); clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);
}
.ff-piece__art img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ff-piece__art span { font-weight: 900; font-size: calc(var(--tile) * .4); color: var(--text-md); }
.ff-piece--item .ff-piece__art { background: radial-gradient(circle, #2a3430, #141917); }
.ff-piece--item .ff-piece__art img { object-fit: contain; width: 80%; height: 80%; }
.ff-piece.is-golden .ff-piece__art { border-color: var(--gold); box-shadow: 0 0 calc(var(--tile) * .18) rgba(255, 198, 0, .6); }
.ff-piece.is-temp .ff-piece__art { border-color: var(--orange-hi); }
.ff-piece__tier { position: absolute; left: 0; top: 0; transform: scale(.9); transform-origin: top left; }
.ff-piece__items { position: absolute; right: 8%; bottom: 8%; display: flex; gap: 2px; }
.ff-piece__items i { width: calc(var(--tile) * .12); height: calc(var(--tile) * .12); background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 3px #000; }
.ff-piece__count { position: absolute; right: 6%; bottom: 4%; font-family: var(--font-num); font-size: calc(var(--tile) * .2); color: #fff; text-shadow: 0 1px 2px #000; }
/* facing wedge (research 09 §1.2): an orange › on the piece's edge along its direction */
.ff-piece__dir {
  position: absolute; left: 50%; top: 50%; width: calc(var(--tile) * .2); height: calc(var(--tile) * .26); pointer-events: none;
  background: #ff9c33; clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%); filter: drop-shadow(0 0 2px #000);
  transform: translate(-50%, -50%) rotate(var(--dir-rot, 0deg)) translateX(calc(var(--tile) * .46));
}
.ff-dir--up { --dir-rot: -90deg; } .ff-dir--right { --dir-rot: 0deg; } .ff-dir--down { --dir-rot: 90deg; } .ff-dir--left { --dir-rot: 180deg; }
.ff-ghost { position: absolute; z-index: 20; pointer-events: none; opacity: .92; transform: scale(1.08); filter: drop-shadow(0 .1rem .16rem rgba(0, 0, 0, .7)); }
.ff-ghost img { width: 100%; height: 100%; object-fit: cover; border: 2px solid var(--mint-400); clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%); }
.ff-ghost.is-golden img { border-color: var(--gold); }
.ff-unit { z-index: 3; transition: transform 110ms linear, opacity 400ms; }
.ff-unit__art { width: 100%; height: 100%; overflow: hidden; border-radius: 50%; border: 2px solid var(--mint-500); background: #111; display: grid; place-items: center; }
.ff-unit__art img { width: 100%; height: 100%; object-fit: cover; }
.ff-unit__art span { font-weight: 900; font-size: calc(var(--tile) * .34); }
.ff-unit.is-enemy .ff-unit__art { border-color: #ff5a4a; border-radius: 12%; transform: rotate(45deg) scale(.82); }
.ff-unit.is-enemy .ff-unit__art img { transform: rotate(-45deg) scale(1.3); }
.ff-unit.is-golden .ff-unit__art { border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 198, 0, .6); }
.ff-unit.is-boss .ff-unit__art { border-width: 3px; box-shadow: 0 0 14px rgba(255, 60, 40, .7); }
.ff-unit.is-skill .ff-unit__art { box-shadow: 0 0 10px rgba(255, 198, 0, .9); }
.ff-unit.is-stunned { filter: grayscale(.6) brightness(.8); }
.ff-unit.is-dead { opacity: 0; }
.ff-unit.is-fly { margin-top: -6%; }
.ff-unit__bars { position: absolute; left: 8%; right: 8%; bottom: -12%; display: flex; flex-direction: column; gap: 1px; }
.ff-unit__bars i { display: block; height: 4px; background: #3fdc6a; box-shadow: 0 0 0 1px #000; }
.ff-unit.is-enemy .ff-unit__bars i.hp { background: #ff4a3a; }
.ff-unit__bars i.sp { height: 3px; background: #ffd23a; }
.ff-float { position: absolute; z-index: 5; transform: translate(-50%, 0); font-family: var(--font-num); font-weight: 700; font-size: .2rem; pointer-events: none; text-shadow: 0 1px 2px #000, 0 0 4px #000; animation: float-up 900ms var(--ease-out) forwards; }
.ff-float--phys { color: #ffd7a8; }
.ff-float--arts { color: #d59cff; }
.ff-float--true { color: #fff; }
.ff-float--heal { color: #6dff9c; }
.ff-float--crit { color: #ff2a2a; }
.ff-float--miss { color: #ff9000; }
@keyframes float-up { to { transform: translate(-50%, -.4rem); opacity: 0; } }
.ff-badge { position: absolute; left: 50%; bottom: .08rem; transform: translateX(-50%); font-family: var(--font-display); font-size: .1rem; letter-spacing: .3em; color: var(--text-dim); opacity: .5; pointer-events: none; }
.gm--combat .ff-badge { display: none; }

/* ---- small screens (1280×720 → root ≈ 66px) ------------------------------------------------------------------------ */
@media (max-aspect-ratio: 16/10) {
  .gm__bonds { right: 4.6rem; }
}

/* fallback view: enemy preview pen (setCamera('pen')) */
.ff-board--pen .ff-pen__enemy { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.ff-board--pen .ff-pen__enemy:hover { filter: brightness(1.2); }
.ff-board--pen .ff-pen__enemy .ff-unit__art { border-color: rgba(255, 90, 60, .7); }
.ff-pen__empty { position: absolute; left: 0; right: 0; top: 45%; text-align: center; color: var(--text-lo); font-size: .16rem; }

/* enemy preview pen view (research 09 §2): the bond strip and the effects column step aside for the pen */
.gm__bonds, .gm__effects { transition: opacity var(--t-med) var(--ease-out); }
.gm.is-pen .gm__bonds, .gm.is-pen .gm__effects { opacity: 0; pointer-events: none; }
.gm.is-pen .gm__bonds > *, .gm.is-pen .gm__effects > *, .gm.is-pen .gm__bonds .bslot, .gm.is-pen .gm__bonds .bstrip__more { pointer-events: none; }

/* solo pause overlay (screens/game.js PausedOverlay; m.public.paused): the field dims under an official matte plate */
.pauseov {
  position: absolute; inset: 0; z-index: 65; display: grid; place-items: center; pointer-events: auto;
  background: rgba(4, 7, 6, .62); -webkit-backdrop-filter: grayscale(.6) blur(2px); backdrop-filter: grayscale(.6) blur(2px);
  animation: screen-in var(--t-med) var(--ease-out);
}
.pauseov__box { display: flex; flex-direction: column; align-items: center; gap: .16rem; }
.pauseov__plate {
  display: flex; flex-direction: column; align-items: center; gap: .02rem; min-width: 3.6rem; padding: .16rem .6rem .2rem;
  background: rgba(20, 22, 22, .9); background: var(--pause-plate, linear-gradient(90deg, transparent, rgba(12, 14, 14, .95) 18%, rgba(12, 14, 14, .95) 82%, transparent)) center / 100% 100% no-repeat;
}
.pauseov__micro { font-family: var(--font-num); font-size: calc(.16 * var(--t)); letter-spacing: .5em; color: var(--mint-400); }
.pauseov__plate h2 { font-size: calc(.5 * var(--t)); font-weight: 900; letter-spacing: .3em; color: #fff; text-shadow: 0 0 .2rem rgba(0, 0, 0, .8); }
.pauseov__note { font-size: calc(.17 * var(--t)); color: var(--text-md); text-shadow: 0 1px 2px #000; }
.pauseov__btns { display: flex; gap: .2rem; }
/* 协议已失效 (ui/downedPlate.js): the project's Modal restyled as the event's panel (video 10:56–10:58) — the official map
   behind, the knocked-out face, the title, and the two buttons under the panel; design px ÷ 100 [ASSUMED: measured from
   that footage]. The face turns from calm to knocked out after .5 s with a shake; with reduced motion it simply shows. */
/* the footage dims the field but keeps it sharp: no blur behind this one */
.modal.downm-veil { background: rgba(3, 5, 4, .6); -webkit-backdrop-filter: none; backdrop-filter: none; }
.modal__box.downm { --bk-c: transparent; width: min(13.8rem, 96vw); max-height: none; background: none; border: 0; box-shadow: none; overflow: visible; }
.downm .modal__stripe { display: none; }
.downm .modal__body { padding: 0; overflow: visible; }
.downm__panel { position: relative; height: 3.45rem; overflow: hidden; background: rgba(5, 11, 13, .9); box-shadow: 0 0 .5rem .25rem rgba(5, 11, 13, .7); }
/* the official map is an opaque square: its edges fade into the panel */
.downm__map { position: absolute; left: 1.6rem; top: -2.6rem; width: 8.67rem; max-width: none; opacity: .55;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.downm__x { position: absolute; width: .24rem; height: .24rem; opacity: .6;
  background: linear-gradient(var(--red), var(--red)) center / 100% 2px no-repeat, linear-gradient(var(--red), var(--red)) center / 2px 100% no-repeat; }
.downm__x--tl { left: 3.2rem; top: .5rem; }
.downm__x--tr { right: 3.2rem; top: .5rem; }
.downm__x--bl { left: 3.2rem; bottom: .5rem; }
.downm__x--br { right: 3.2rem; bottom: .5rem; }
.downm__face { position: absolute; left: 4.79rem; top: 1.05rem; width: 1.12rem; height: 1.04rem; color: #c9cccc; }
.downm__face.is-out { animation: downm-shake 360ms steps(6, end); }
.downm__pix { display: block; width: 100%; height: 100%; }
.downm__title { position: absolute; left: 6.3rem; top: 1.2rem; margin: 0; color: #f0353b; font-size: calc(.6 * var(--t)); font-weight: 900; letter-spacing: .04em;
  line-height: 1.1; white-space: nowrap; animation: downm-in 260ms 120ms var(--ease-out) both; }
.downm__sub { position: absolute; left: 6.3rem; top: 2.05rem; color: #6d7779; font-family: var(--font-display); font-size: calc(.2 * var(--t)); letter-spacing: .08em; }
.downm__btns { display: flex; justify-content: center; gap: 2rem; margin-top: .8rem; }
.downm__btn { min-width: 3.06rem; min-height: .75rem; font-size: calc(.24 * var(--t)); }
/* the footage's button glyphs are about as tall as the text block */
.downm__btn .btn__icon { width: 1.5em; height: 1.5em; }
.downm__btn--watch { background: #e9ecec; color: #15191a; border-color: #e9ecec; }
@keyframes downm-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-.06rem); } 40%, 80% { transform: translateX(.06rem); } }
@keyframes downm-in { from { opacity: 0; transform: translateX(.3rem); } }
@media (prefers-reduced-motion: reduce) {
  .downm__face.is-out, .downm__title { animation: none; }
}

/* ---- in-match vote / skip controls: deliberately loud ------------------------------------------------ */
.vote-dock {
  position: absolute;
  top: 1.12rem;
  right: .18rem;
  z-index: 72;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .06rem;
  padding: .1rem .12rem;
  pointer-events: auto;
  background: rgba(4, 12, 13, .9);
  border: 1px solid var(--mint-500);
  border-radius: .14rem;
  box-shadow: 0 0 .3rem rgba(0, 0, 0, .6);
}
.vote-dock__label {
  color: var(--mint-300);
  font-size: calc(.16 * var(--t));
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
}
.vote-big {
  min-height: .44rem;
  padding: .06rem .16rem;
  border: 1px solid var(--mint-500);
  border-radius: .1rem;
  background: rgba(16, 42, 42, .95);
  color: var(--mint-200);
  font-family: var(--font-display);
  font-size: calc(.26 * var(--t));
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1.05;
  cursor: pointer;
  white-space: nowrap;
}
.vote-big:hover { background: rgba(30, 80, 72, .95); color: #fff; }
.vote-big:disabled { opacity: .45; cursor: default; }
.vote-big--danger { border-color: var(--red-premium); color: #ffb2ad; background: rgba(72, 12, 12, .95); }
.vote-big--no { border-color: var(--line); color: var(--text-lo); background: rgba(15, 18, 19, .95); }
.vote-big--yes { border-color: var(--mint-400); color: #06110d; background: var(--mint-300); }
/* 准备就绪 look for the vote/skip actions */
.vote-dock .vote-readybtn {
  width: 2.3rem;
  min-width: 2.3rem;
  height: .56rem;
  padding: 0 .16rem 0 .12rem;
  gap: .12rem;
  font-size: .22rem;
  letter-spacing: .14em;
}
/* 加时 lives in one horizontal row below the top bar: lower than the countdown but above the right-hand effects column */
.vote-dock--extend { top: 1.58rem; flex-direction: row; align-items: center; }
/* 跳过联防 uses the 准备就绪 button's exact box (2.3 × .56 rem) and sits 20 px higher */
.vote-dock--unite { top: 1.12rem; }
.vote-dock--unite .vote-readybtn {
  width: 2.3rem;
  min-width: 2.3rem;
  height: .56rem;
  padding: 0 .16rem 0 .12rem;
  gap: .12rem;
  font-size: .22rem;
  letter-spacing: .14em;
}
.vote-readybtn--danger { border-color: var(--red-premium); color: #ffd9d4; box-shadow: 0 0 .16rem rgba(255, 84, 84, .14); }
.vote-readybtn--danger .readybtn__box { border-color: var(--red-premium); }
.vote-readybtn--danger:hover:not(:disabled) { background: rgba(255, 84, 84, .14); box-shadow: 0 0 .24rem rgba(255, 84, 84, .28); }
.vote-readybtn--no { border-color: var(--line-2); color: var(--text-lo); box-shadow: none; }
.vote-readybtn--no .readybtn__box { border-color: var(--line-2); }
.vote-readybtn--yes { background: var(--mint-500); color: var(--text-on-mint); }
.vote-readybtn--yes .readybtn__box { background: var(--text-on-mint); color: var(--mint-400); }
.vote-banner {
  position: absolute;
  left: 50%;
  top: 14%;
  z-index: 90;
  width: min(92vw, 10.2rem);
  padding: .3rem .36rem .34rem;
  transform: translateX(-50%);
  pointer-events: auto;
  text-align: center;
  background: rgba(3, 10, 10, .96);
  border: 2px solid var(--mint-400);
  border-radius: .16rem;
  box-shadow: 0 0 .7rem rgba(0, 0, 0, .8), 0 0 .25rem rgba(90, 255, 220, .35);
  animation: vote-pop 180ms var(--ease-out) both;
}
.vote-banner__kicker {
  color: var(--amber);
  font-size: calc(.2 * var(--t));
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.vote-banner__title {
  margin: .08rem 0 .05rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: calc(.6 * var(--t));
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.05;
  text-shadow: 0 0 .12rem rgba(120, 255, 220, .65);
}
.vote-banner__count { color: var(--mint-300); font-size: calc(.23 * var(--t)); font-weight: 800; }
.vote-banner__count b { color: #fff; font-size: calc(.34 * var(--t)); }
.vote-banner__count span { color: var(--text-lo); font-weight: 600; }
.vote-banner__marks { display: flex; flex-wrap: wrap; justify-content: center; gap: .06rem; margin-top: .08rem; }
.vote-mark {
  display: inline-grid; place-items: center; min-width: .26rem; height: .26rem; padding: 0 .03rem;
  border: 1px solid var(--line-2); background: rgba(0, 0, 0, .25); font-size: calc(.2 * var(--t)); font-weight: 900; line-height: 1;
}
.vote-mark.is-yes { border-color: var(--mint-600); color: var(--mint-400); }
.vote-mark.is-no { border-color: var(--orange); color: var(--orange-hi); }
.vote-mark.is-wait { color: var(--text-dim); }
.vote-banner__target { color: var(--orange-hi); font-size: calc(.2 * var(--t)); font-weight: 700; letter-spacing: .04em; }
.vote-banner__actions { display: flex; justify-content: center; gap: .14rem; margin-top: .16rem; }
.vote-banner__actions .vote-readybtn { min-width: 1.7rem; height: .5rem; font-size: calc(.2 * var(--t)); letter-spacing: .08em; }
@keyframes vote-pop { from { opacity: 0; transform: translate(-50%, -.08rem) scale(.96); } }
@media (max-width: 720px) {
  .vote-dock { top: .92rem; right: .06rem; gap: .04rem; padding: .06rem; }
  .vote-dock--extend { top: 1.28rem; }
  .vote-dock--unite { top: .92rem; }
  .vote-dock .vote-readybtn, .vote-dock--unite .vote-readybtn {
    width: 2.3rem; min-width: 2.3rem; height: .56rem;
    padding: 0 .16rem 0 .12rem; gap: .12rem;
    font-size: .22rem; letter-spacing: .14em;
  }
  .vote-dock .readybtn__box { width: .24rem; height: .24rem; }
  .vote-dock .readybtn__box .icon { width: .2rem; height: .2rem; }
  .vote-banner__title { font-size: calc(.48 * var(--t)); }
  .vote-banner__actions .vote-readybtn { min-width: 1.35rem; height: .44rem; font-size: calc(.17 * var(--t)); }
}
@media (prefers-reduced-motion: reduce) { .vote-banner { animation: none; } }

/* Reference-style bond markers: dark glass discs, mint line art and a Roman tier above; no names under them. */
.bslot { width: .86rem; padding-top: .14rem; }
.bslot .bond { --disc: .62rem; gap: 0; }
.bslot .bond__name { display: none; }
.bslot .bond__disc { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55)); }
.bslot .bond__core {
  background: radial-gradient(circle at 48% 32%, #29443f 0, #14231f 58%, #081210 100%);
  box-shadow: inset 0 0 0 1px rgba(153, 222, 205, .28), inset 0 -4px 8px rgba(0, 0, 0, .55), 0 0 10px rgba(0, 0, 0, .55);
}
.bslot .bond.is-active .bond__core {
  background: radial-gradient(circle at 48% 30%, rgba(69, 142, 123, .72) 0, rgba(17, 46, 38, .96) 58%, #071613 100%);
  box-shadow: 0 0 .16rem rgba(74, 219, 179, .42), inset 0 0 0 1px rgba(166, 250, 226, .5), inset 0 -4px 8px rgba(0, 28, 19, .55);
}
.bslot .bond.is-active .bond__icon {
  filter: brightness(0) saturate(100%) invert(82%) sepia(34%) saturate(620%) hue-rotate(105deg) brightness(1.04) contrast(1.05);
}
.bslot .bond.is-active .bond__glyph { color: #b9fbe8; }
.bslot .bond:not(.is-active) .bond__icon { filter: brightness(0) invert(.62) opacity(.7); }
.bslot .bond__ring circle { stroke-width: 3.5; stroke: rgba(165, 223, 208, .18); }
.bslot .bond__ring circle.on { stroke: rgba(118, 240, 202, .88); filter: drop-shadow(0 0 3px rgba(78, 216, 175, .7)); }
.bslot .bond__count { bottom: -.08rem; font-size: .1rem; opacity: .85; color: #d9fff3; }
.bslot__tier {
  position: absolute; top: -.02rem; left: 50%; transform: translateX(-50%); z-index: 3;
  padding: 0 .04rem; color: #effffb; background: rgba(6, 18, 15, .88);
  border: 1px solid rgba(154, 222, 205, .35); font-size: .1rem; line-height: 1.35; letter-spacing: .04em;
  text-shadow: 0 1px 2px #000;
}
.bslot__count { top: auto; bottom: -.02rem; right: .01rem; font-size: .1rem; padding: 0 .025rem; opacity: .8; background: rgba(5, 13, 11, .86); border-color: rgba(150, 205, 192, .26); }
.bslot__count small { font-size: .085rem; }
.bslot__expected { top: .02rem; left: -.03rem; font-size: .095rem; }
.bslot.is-off .bslot__off { margin-top: .02rem; font-size: .095rem; }
@media (max-width: 760px) {
  .bslot { width: .72rem; }
  .bslot .bond { --disc: .5rem; }
  .bslot__tier { font-size: .085rem; }
}

/* Exact bond marker reference: teal disc, black glyph, white Roman tier above, big white layer count, white name below. */
.bslot { width: .98rem; padding-top: .18rem; }
.bslot .bond { --disc: .76rem; gap: .025rem; }
.bslot .bond__name {
  display: block; font-size: .16rem; font-weight: 600; line-height: 1.15;
  color: #fff; text-shadow: 0 1px 3px #000, 0 0 5px rgba(0, 0, 0, .9);
  max-width: 1rem; overflow: hidden; text-overflow: ellipsis;
}
.bslot .bond__core {
  background: radial-gradient(circle at 50% 32%, #4ff0cf 0, #22c8a5 55%, #0b8068 100%);
  box-shadow: 0 0 .18rem rgba(66, 237, 200, .55), inset 0 0 0 1px rgba(210, 255, 244, .6), inset 0 -5px 10px rgba(0, 64, 50, .5);
}
.bslot .bond.is-active .bond__core {
  background: radial-gradient(circle at 50% 32%, #54f3d2 0, #25cda9 55%, #0c8169 100%);
  box-shadow: 0 0 .2rem rgba(66, 237, 200, .65), inset 0 0 0 1px rgba(220, 255, 247, .72), inset 0 -5px 10px rgba(0, 64, 50, .5);
}
.bslot .bond.is-active .bond__icon { filter: brightness(0); }
.bslot .bond.is-active .bond__glyph { color: #04251c; }
.bslot .bond:not(.is-active) .bond__icon { filter: brightness(0) invert(.64) opacity(.8); }
.bslot .bond__ring circle { stroke-width: 4; stroke: rgba(7, 60, 49, .38); }
.bslot .bond__ring circle.on { stroke: #b8fff0; filter: drop-shadow(0 0 2px rgba(128, 255, 226, .8)); }
.bslot .bond__count {
  bottom: .015rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-num); font-size: .235rem; font-weight: 700; line-height: 1;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 4px rgba(0, 0, 0, .75);
  opacity: 1;
}
.bslot__tier {
  top: -.06rem; left: 50%; transform: translateX(-50%); z-index: 4;
  padding: 0; border: 0; background: transparent;
  color: #fff; font-family: var(--font-num); font-size: .155rem; font-weight: 800;
  line-height: 1; letter-spacing: .04em; text-shadow: 0 1px 3px #000, 0 0 4px rgba(0, 0, 0, .9);
}
.bslot__count { display: none; }
.bslot__expected { top: .02rem; left: -.03rem; font-size: .1rem; }
.bslot.is-off .bslot__off { margin-top: .02rem; font-size: .1rem; }
@media (max-width: 760px) {
  .bslot { width: .86rem; }
  .bslot .bond { --disc: .64rem; }
  .bslot .bond__name { font-size: .14rem; max-width: .86rem; }
  .bslot .bond__count { font-size: .2rem; }
  .bslot__tier { font-size: .13rem; }
}

/* tier label: nudged down, pure white and heavy */
.bslot__tier {
  top: .025rem;
  color: #fff;
  font-weight: 900;
  -webkit-text-stroke: .2px #fff;
  text-shadow: 0 1px 2px #000, 0 0 3px rgba(0, 0, 0, .85);
}

/* final bond label sizing/layering: larger white tier, larger name, text above the icon layer */
.bslot__tier {
  top: .085rem;
  z-index: 6;
  color: #fff;
  font-size: .21rem;
  font-weight: 900;
}
.bslot .bond__name {
  position: relative;
  z-index: 3;
  font-size: .19rem;
  font-weight: 700;
  color: #fff;
}
.bslot .bond__count { z-index: 4; }
@media (max-width: 760px) {
  .bslot__tier { top: .07rem; font-size: .17rem; }
  .bslot .bond__name { font-size: .17rem; }
}

/* inactive bond markers: grey; the whole marker and its inner glyph a little smaller */
.bslot { width: .92rem; }
.bslot .bond { --disc: .7rem; }
.bslot .bond__icon { width: 56%; height: 56%; }
.bslot .bond__glyph { font-size: calc(var(--disc) * .38); }
.bslot .bond:not(.is-active) .bond__core {
  background: radial-gradient(circle at 48% 32%, #59625f 0, #343b39 58%, #1b211f 100%);
  box-shadow: inset 0 0 0 1px rgba(225, 232, 229, .18), inset 0 -4px 8px rgba(0, 0, 0, .5), 0 0 7px rgba(0, 0, 0, .45);
}
.bslot .bond:not(.is-active) .bond__icon { filter: brightness(0) invert(.58) opacity(.72); }
.bslot .bond:not(.is-active) .bond__glyph { color: #b5bfbb; }
.bslot .bond:not(.is-active) .bond__ring circle { stroke: rgba(220, 230, 225, .13); }
.bslot .bond:not(.is-active) .bond__name { color: #9da8a3; }
.bslot .bond:not(.is-active) .bond__count { color: #d3dbd7; opacity: .8; }
@media (max-width: 760px) {
  .bslot { width: .84rem; }
  .bslot .bond { --disc: .62rem; }
}

.bslot:not(.is-active) .bslot__tier { color: #9da8a3; -webkit-text-stroke: 0; text-shadow: 0 1px 2px #000; }

/* bond disc back to the original icon size */
.bslot { width: .76rem; }
.bslot .bond { --disc: .52rem; }
.bslot .bond__icon { width: 66%; height: 66%; }
.bslot .bond__name { max-width: .9rem; font-size: .16rem; }
.bslot .bond__count { font-size: .19rem; }
.bslot__tier { font-size: .17rem; top: .07rem; }
@media (max-width: 760px) {
  .bslot { width: .7rem; }
  .bslot .bond { --disc: .48rem; }
  .bslot .bond__name { font-size: .14rem; max-width: .78rem; }
  .bslot .bond__count { font-size: .17rem; }
  .bslot__tier { font-size: .15rem; }
}

/* 自选编队: 1–2 of the 12-name roster, after the strategy draft, everyone confirms */
.diydraft {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: radial-gradient(60% 60% at 50% 45%, rgba(7, 20, 19, .45), rgba(2, 6, 5, .82));
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.diydraft__box { position: relative;
  width: min(11.6rem, 92vw); max-height: 88vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(16, 32, 29, .98), rgba(7, 16, 14, .99));
  border: 1px solid rgba(78, 216, 175, .35); box-shadow: 0 0 .5rem rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(78, 216, 175, .08);
}
.diydraft__head { padding: .18rem .24rem .12rem; border-bottom: 1px solid rgba(78, 216, 175, .18); }
.diydraft__head > div { display: flex; align-items: center; gap: .1rem; }
.diydraft__head h2 { margin: 0; color: var(--text-hi); font-size: calc(.28 * var(--t)); letter-spacing: .08em; }
.diydraft__head p { margin: .08rem 0 0; max-width: 9rem; color: var(--text-lo); font-size: calc(.14 * var(--t)); line-height: 1.45; }
.diydraft__progress { position: absolute; right: .24rem; top: .2rem; color: var(--mint-300); font-size: calc(.13 * var(--t)); }
.diydraft__body { flex: 1; min-height: 0; overflow-y: auto; padding: .14rem .24rem; display: flex; flex-direction: column; gap: .14rem; }
.diydraft__tier h3 { display: flex; align-items: center; gap: .06rem; margin: 0 0 .06rem; color: var(--text-md); font-size: calc(.15 * var(--t)); font-weight: 600; }
.diydraft__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .08rem; }
.diydraft__card {
  position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .04rem;
  padding: .06rem .04rem .08rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .025);
  color: var(--text-md); cursor: pointer;
}
.diydraft__card:hover { border-color: var(--mint-700); }
.diydraft__card.is-on { border-color: var(--mint-400); background: rgba(78, 216, 175, .13); box-shadow: 0 0 .14rem rgba(78, 216, 175, .18); }
.diydraft__ava { width: 100%; aspect-ratio: 1 / 1.06; display: grid; place-items: center; overflow: hidden; background: rgba(0, 0, 0, .35); }
.diydraft__ava img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.diydraft__ava b { color: var(--text-dim); font-size: calc(.24 * var(--t)); }
.diydraft__name { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: calc(.12 * var(--t)); }
.diydraft__check { position: absolute; right: .04rem; top: .04rem; display: grid; place-items: center; width: .2rem; height: .2rem; border-radius: 50%; background: var(--mint-400); color: #04251d; font-size: .15rem; font-weight: 900; }
.diydraft__card:not(.is-on) .diydraft__check { display: none; }
.diydraft__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .16rem; padding: .12rem .24rem .16rem; border-top: 1px solid rgba(78, 216, 175, .18); color: var(--text-lo); font-size: calc(.13 * var(--t)); }
@media (max-width: 760px) {
  .diydraft__box { position: relative; width: 96vw; max-height: 92vh; }
  .diydraft__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .diydraft__progress { position: static; margin-left: auto; }
  .diydraft__head > div { flex-wrap: wrap; }
}

.diydraft__tiern { margin-left: auto; color: var(--mint-300); font-size: calc(.12 * var(--t)); }
.diydraft__card.is-full { opacity: .35; cursor: not-allowed; }

/* Click a teammate avatar: their on-board operators and active bonds. */
.teampop { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: .3rem;
  background: rgba(2, 7, 6, .68); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.teampop__box { width: min(7.2rem, 94vw); max-height: 86vh; overflow-y: auto; padding: .16rem .18rem; 
  background: linear-gradient(180deg, rgba(15, 30, 27, .99), rgba(6, 14, 12, .99));
  border: 1px solid rgba(78, 216, 175, .35); box-shadow: 0 0 .3rem rgba(0, 0, 0, .55); }
.teampop__head { display: flex; align-items: center; gap: .1rem; padding-bottom: .1rem; border-bottom: 1px solid rgba(78, 216, 175, .16); }
.teampop__htxt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.teampop__htxt b { font-size: calc(.2 * var(--t)); color: var(--text-hi); }
.teampop__htxt span { font-size: calc(.12 * var(--t)); color: var(--text-lo); }
.teampop__x { margin-left: auto; width: .26rem; height: .26rem; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-lo); cursor: pointer; }
.teampop__x:hover { color: var(--mint-300); }
.teampop__sec { padding: .12rem 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.teampop__sec h3 { margin: 0 0 .08rem; color: var(--text-md); font-size: calc(.14 * var(--t)); font-weight: 600; letter-spacing: .04em; }
.teampop__units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .08rem; }
.teampop__unit { display: flex; flex-direction: column; align-items: center; gap: .03rem; min-width: 0; }
.teampop__ava { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; background: rgba(0, 0, 0, .4); border: 1px solid var(--line); }
.teampop__ava img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.teampop__ava b { color: var(--text-dim); font-size: calc(.24 * var(--t)); }
.teampop__name { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; color: var(--text-md); font-size: calc(.11 * var(--t)); }
.teampop__none { margin: 0; color: var(--text-dim); font-size: calc(.13 * var(--t)); }
.teampop__foot { display: flex; justify-content: flex-end; padding-top: .1rem; }
.teampop .bstrip { flex-wrap: wrap; gap: .08rem; }
.teampop .bslot { width: .78rem; }
@media (max-width: 760px) {
  .teampop__box { width: 96vw; }
  .teampop__units { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Teammate avatar: inline strip growing from the same roster row. */
.team__peek {
  position: absolute; left: .72rem; top: -.03rem; z-index: 20;
  width: min(7.2rem, 46vw); height: max(1.04rem, 84px); display: flex; align-items: center; gap: .07rem;
  padding: .05rem .07rem; border: 1px solid rgba(78, 216, 175, .38);
  background: linear-gradient(90deg, rgba(9, 27, 23, .98), rgba(8, 20, 17, .95) 78%, rgba(8, 17, 15, .82));
  box-shadow: 0 0 .2rem rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(78, 216, 175, .08);
  transform-origin: left center; animation: teampeek .16s ease-out;
}
@keyframes teampeek { from { opacity: 0; transform: translateX(-.08rem) scaleX(.96); } to { opacity: 1; transform: none; } }
.team__peek-name { display: flex; flex-direction: column; flex: none; width: 1.05rem; min-width: 0; }
.team__peek-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-hi); font-size: calc(.15 * var(--t)); }
.team__peek-name small { color: var(--mint-300); font-size: calc(.1 * var(--t)); }
.team__peek-ops { display: flex; align-items: center; gap: .035rem; flex: none; overflow: visible; }
.team__peek-op { display: block; flex: none; width: max(.42rem, 34px); height: max(.42rem, 34px); overflow: hidden; background: rgba(0, 0, 0, .4); border: 1px solid var(--line-2); }
.team__peek-op img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.team__peek-op b { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-dim); font-size: calc(.18 * var(--t)); }
.team__peek-none { color: var(--text-dim); font-size: calc(.11 * var(--t)); white-space: nowrap; }
.team__peek-bonds { flex: none; overflow: visible; }
.team__peek-acts { display: flex; align-items: center; gap: .04rem; flex: none; margin-left: auto; }
.team__peek-x { width: .22rem; height: .22rem; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-lo); cursor: pointer; }
.team__peek-x:hover { color: var(--mint-300); }
.team__peek .bstrip { flex-wrap: nowrap; gap: .02rem; }
.team__peek .bslot { width: .54rem; padding-top: .09rem; }
.team__peek .bslot .bond { --disc: .33rem; }
.team__peek .bslot .bond__name { display: none; }
.team__peek .bslot__tier { top: .01rem; font-size: .1rem; }
.team__peek .bslot .bond__count { font-size: .14rem; bottom: 0; }
.team__peek .bslot__count { display: none; }
.team__peek .bstrip__more { font-size: .1rem; padding: 0 .03rem; }
@media (max-width: 760px) {
  .team__peek { width: min(6.4rem, 64vw); height: max(.94rem, 72px); }
  .team__peek-name { width: .9rem; }
  .team__peek-op { width: 28px; height: 28px; }
}

/* Inline teammate peek, refined: same height as the avatar, soft glass, no square tiles. */
.team { --team-peek-h: .8rem; }
.team--fit { --team-peek-h: var(--team-pa, .8rem); }
.team__peek {
  left: .72rem; top: 0; height: max(var(--team-peek-h), 48px);
  width: max-content; max-width: none;
  border-radius: .18rem; border: 1px solid rgba(120, 238, 208, .28);
  background: linear-gradient(90deg, rgba(8, 26, 22, .97), rgba(8, 20, 17, .93) 68%, rgba(8, 20, 17, .55));
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  box-shadow: 0 0 .2rem rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(120, 238, 208, .06);
  padding: .035rem .06rem;
}
.team__peek-op {
  width: calc(var(--team-peek-h) * .78); height: calc(var(--team-peek-h) * .78);
  border: 0; border-radius: 50%; background: transparent; overflow: hidden;
  -webkit-mask: radial-gradient(circle at 50% 48%, #000 56%, transparent 98%);
  mask: radial-gradient(circle at 50% 48%, #000 56%, transparent 98%);
  filter: drop-shadow(0 0 .08rem rgba(0, 0, 0, .7));
}
.team__peek-op img { border-radius: 50%; }
.team__peek-name b { font-size: calc(.14 * var(--t)); }
.team__peek .bslot { width: .62rem; padding-top: .08rem; }
.team__peek .bslot .bond { --disc: .42rem; }
.team__peek .bslot .bond__name {
  display: block; max-width: .68rem; margin-top: .015rem;
  font-size: max(.1rem, 8px); font-weight: 600; line-height: 1.05; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.team__peek .bslot__tier { top: .01rem; font-size: .105rem; }
.team__peek .bslot .bond__count { font-size: .17rem; bottom: .015rem; }
.team__peek .bslot .bond__ring circle { stroke-width: 3.2; }

/* Teammate peek: strategy icon + name, and larger in-game roster names. */
.team__peek-band { display: flex; align-items: center; gap: .04rem; flex: none; width: 1.35rem; min-width: 0; padding-right: .04rem; border-right: 1px solid rgba(78, 216, 175, .18); }
.team__peek-band > img, .team__peek-band > span:first-child { flex: none; width: .48rem; height: .48rem; object-fit: contain; }
.team__peek-band > span { display: flex; flex-direction: column; min-width: 0; }
.team__peek-band small { color: var(--mint-300); font-size: max(.085rem, 7px); line-height: 1.1; }
.team__peek-band b { max-width: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-hi); font-size: max(.11rem, 9px); line-height: 1.2; }
.team__name { font-size: .19rem; max-width: 1.65rem; }
.team__peek-name b { font-size: calc(.16 * var(--t)); }

.team__name { font-size: .23rem; max-width: 1.9rem; }
.team__peek-name b { font-size: calc(.18 * var(--t)); }

/* Name styling must look identical to the lobby: no game-side text shadow / lighter weight over the gradient. */
.team__name { font-weight: 700; text-shadow: none; }
.team__peek-name b, .team__peek-name .pname { text-shadow: none; }
.team__name.pname--glow { text-shadow: 0 0 .08rem currentColor, 0 0 .18rem rgba(120, 255, 220, .45); }

/* Uploaded name cards in the match HUD, with a moving holographic sheen. */
.team__row.has-card::before { content: ''; position: absolute; left: .62rem; right: 0; top: -.04rem; bottom: -.04rem; z-index: 0;
  background: linear-gradient(90deg, rgba(4, 14, 11, .9), rgba(4, 14, 11, .45) 65%, rgba(4, 14, 11, .12)), var(--card);
  background-size: cover; background-position: center; border: 1px solid rgba(78, 216, 175, .2); border-radius: .12rem; opacity: .72; }
.team__row.has-card::after { content: ''; position: absolute; left: .62rem; right: 0; top: -.04rem; bottom: -.04rem; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(163, 255, 235, .22) 45%, transparent 60%); background-size: 220% 100%;
  animation: teamcard-sheen 3.8s linear infinite; mix-blend-mode: screen; border-radius: .12rem; }
.team__row.has-card > .team__btn, .team__row.has-card > .team__info, .team__row.has-card > .team__bubble { position: relative; z-index: 2; }
.team__row.has-card .team__info { background: transparent; }
@keyframes teamcard-sheen { from { background-position: 140% 0; } to { background-position: -80% 0; } }
.team__peek.has-card { background-image: linear-gradient(90deg, rgba(4, 14, 11, .9), rgba(4, 14, 11, .5) 66%, rgba(4, 14, 11, .2)), var(--card); background-size: cover; background-position: center; }
.team__peek.has-card::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 32%, rgba(163, 255, 235, .18) 46%, transparent 60%); background-size: 220% 100%;
  animation: teamcard-sheen 3.8s linear infinite; mix-blend-mode: screen; }
.team__peek.has-card > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .team__row.has-card::after, .team__peek.has-card::after { animation: none; } }

/* Show the whole uploaded name card in the match roster, not just a cropped sliver behind the name. */
.team__row.has-card { min-width: 3rem; }
.team__row.has-card::before {
  left: .62rem; right: 0;
  background: linear-gradient(90deg, rgba(4, 14, 11, .72), rgba(4, 14, 11, .28) 58%, rgba(4, 14, 11, .04)), var(--card);
  background-size: cover; background-position: center; opacity: .96;
  box-shadow: 0 0 .12rem rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(120, 255, 226, .16);
}
.team__row.has-card .team__info { padding-right: .06rem; }
.team__row.has-card::before, .team__row.has-card::after { top: 0; bottom: 0; }

/* Chat and emotes as screen danmaku; they never touch the roster/name-card layout. */
.danmaku { position: fixed; inset: 0; z-index: 58; overflow: hidden; pointer-events: none; }
.danmaku__item { position: absolute; left: 100%; top: var(--y); display: flex; align-items: center; gap: .06rem; max-width: 70vw;
  padding: .035rem .1rem; white-space: nowrap; border-radius: .18rem; border: 1px solid rgba(78, 216, 175, .25);
  background: linear-gradient(90deg, rgba(5, 17, 14, .86), rgba(5, 17, 14, .58)); box-shadow: 0 .02rem .12rem rgba(0, 0, 0, .35);
  animation: danmaku-run var(--dur) linear forwards; will-change: transform; }
.danmaku__item--chat { color: #eafff9; font-size: calc(.15 * var(--t)); }
.danmaku__item--emote { padding: .02rem .07rem .02rem .03rem; }
.danmaku__who { font-size: calc(.13 * var(--t)); font-weight: 700; }
.danmaku__who .pname { max-width: 2.2rem; font-size: inherit; }
.danmaku__text { color: #fff; text-shadow: 0 1px 2px #000; }
.danmaku__emote { width: .6rem; height: .6rem; display: grid; place-items: center; overflow: hidden; }
.danmaku__emote .eart { width: 100%; height: 100%; object-fit: contain; }
@keyframes danmaku-run { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 100%)); } }
@media (prefers-reduced-motion: reduce) { .danmaku__item { animation-duration: calc(var(--dur) * 1.4); } }
.team__row.has-card::before, .team__row.has-card::after { width: 2.38rem; right: auto; }

/* Keep the match name card at one fixed 3:1 size even when the roster relayouts after a death / while spectating. */
.team__row.has-card::before,
.team__row.has-card::after {
  width: 2.38rem;
  height: .8rem;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

/* Danmaku: no pill/background, pure white and significantly larger. */
.danmaku__item {
  background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0;
  color: #fff; text-shadow: 0 1px 3px #000, 0 0 5px rgba(0, 0, 0, .9);
}
.danmaku__item--chat { font-size: .3rem; font-weight: 700; }
.danmaku__who { font-size: .22rem; font-weight: 800; color: #fff; }
.danmaku__who .pname {
  color: #fff !important; background: none !important; -webkit-text-fill-color: #fff;
  -webkit-background-clip: border-box !important; background-clip: border-box !important; font-size: inherit;
}
.danmaku__text { color: #fff; font-size: .3rem; font-weight: 700; text-shadow: 0 1px 3px #000, 0 0 5px rgba(0, 0, 0, .9); }
.danmaku__item--emote { padding: 0; }
.danmaku__emote { width: .78rem; height: .78rem; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8)); }

/* U子: slot-machine key in the same toolbar row as 冻结, with a rainbow frame and the freeze button's height. */
.uzi { display: flex; flex: none; pointer-events: auto; }
.uzi__btn { position: relative; right: auto; bottom: auto; z-index: auto; display: flex; align-items: center; gap: .06rem;
  height: .48rem; box-sizing: border-box; padding: 0 .11rem; color: #f4fff9; cursor: pointer;
  border: 2px solid transparent; border-radius: 0;
  background: linear-gradient(180deg, #08110f, #08110f) padding-box,
    linear-gradient(90deg, #ff4d6d, #ffd166, #4ed8af, #4aa8ff, #b36bff, #ff4d6d) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: uzi-rainbow 3s linear infinite;
  font-size: calc(.13 * var(--t)); font-weight: 700; white-space: nowrap; pointer-events: auto;
  box-shadow: 0 0 .16rem rgba(255, 122, 146, .3), inset 0 0 .1rem rgba(78, 216, 175, .18); }
.uzi__btn .icon { width: .2rem; height: .2rem; color: #ffd166; }
@keyframes uzi-rainbow { to { background-position: 0 0, 300% 0; } }
.uzi__modal { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; background: rgba(2, 7, 6, .68); }
.uzi__box { width: min(7rem, 92vw); max-height: 80vh; overflow-y: auto; padding: .14rem .16rem;
  background: linear-gradient(180deg, rgba(15, 30, 27, .99), rgba(6, 14, 12, .99)); border: 1px solid rgba(78, 216, 175, .4); }
.uzi__box > header { display: flex; align-items: baseline; gap: .08rem; margin-bottom: .1rem; color: var(--text-lo); font-size: calc(.11 * var(--t)); }
.uzi__box > header b { color: var(--text-hi); font-size: calc(.22 * var(--t)); }
.uzi__box > header button { margin-left: auto; border: 0; background: transparent; color: var(--text-lo); cursor: pointer; }
.uzi__machine { position: relative; display: flex; justify-content: center; align-items: center; gap: .12rem;
  margin: .02rem auto .14rem; padding: .1rem .48rem .1rem .16rem; width: min(4.6rem, 86%);
  background: linear-gradient(180deg, #233c36, #0a1815); border: 2px solid #d3b25a; border-radius: .08rem;
  box-shadow: inset 0 0 .18rem rgba(255, 213, 106, .18), 0 .08rem .2rem rgba(0, 0, 0, .45); }
.uzi__reels { display: flex; gap: .06rem; padding: .05rem; background: #050b0a; border: 1px solid #8d7438; border-radius: .04rem; }
.uzi__reel { width: .62rem; height: .9rem; overflow: hidden; background: #fff7dc; border: 2px solid #b48d3c; border-radius: .03rem; }
.uzi__strip { display: flex; flex-direction: column; animation: uzi-spin 1.8s linear infinite; }
.uzi__strip span { display: grid; place-items: center; flex: none; height: .45rem; color: #3a2509; font-size: .3rem; font-weight: 900; }
.uzi__reel:nth-child(2) .uzi__strip { animation-duration: 2.05s; animation-direction: reverse; }
.uzi__reel:nth-child(3) .uzi__strip { animation-duration: 1.6s; }
@keyframes uzi-spin { from { transform: translateY(0); } to { transform: translateY(-4.95rem); } }
.uzi__jackpot { color: #ffd66a; font-size: calc(.13 * var(--t)); font-weight: 900; letter-spacing: .14em; text-shadow: 0 0 .12rem rgba(255, 190, 60, .65); }
.uzi__lever { position: absolute; right: .12rem; top: .18rem; width: .12rem; height: .42rem; border-radius: .06rem;
  background: linear-gradient(90deg, #7b5e24, #f4d071, #7b5e24); box-shadow: 0 .02rem .08rem rgba(0, 0, 0, .5); }
.uzi__lever i { position: absolute; left: -.06rem; top: -.11rem; width: .24rem; height: .24rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8b7a, #a5231e); box-shadow: 0 0 .08rem rgba(255, 90, 70, .5); }
.uzi__empty { margin: .08rem 0; color: var(--text-lo); font-size: calc(.12 * var(--t)); }
.uzi__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .08rem; }
.uzi__card { display: flex; flex-direction: column; align-items: center; gap: .03rem; padding: .05rem; color: var(--text-md);
  background: rgba(255, 255, 255, .025); border: 1px solid var(--line); cursor: pointer; font-size: calc(.12 * var(--t)); }
.uzi__card:hover, .uzi__card.is-on { border-color: var(--mint-400); background: rgba(78, 216, 175, .12); }
.uzi__ava { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: rgba(0, 0, 0, .35); }
.uzi__ava img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.uzi__card small { color: var(--text-lo); font-size: calc(.095 * var(--t)); }
.uzi__box > footer { display: flex; justify-content: flex-end; margin-top: .1rem; }