卫戍协议：盟约 web remake — initial import

Online co-op browser remake of Arknights' Stronghold Protocol: Alliance
(client-simulated combat, official waves/bonds/items/strategies, 3D board,
facing wheel, operator loadout, official emotes, deployment scripts).

public/css/screens/briefing.css

@@ -0,0 +1,100 @@
+/* ==========================================================================================
+   screens/briefing.css — INFO_CHECK briefing (js/screens/briefing.js) + the pre-game step header
+   shared with the band draft (js/ui/matchChrome.js StepHeader). Research 06 §4.1 / §11.6.
+   ========================================================================================== */
+
+/* ---- shared pre-game backdrop + header ---- */
+.brief__bg {
+  position: absolute; inset: 0; z-index: 0; pointer-events: none;
+  background:
+    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px),
+    radial-gradient(90% 70% at 20% 30%, rgba(232, 90, 26, .07), transparent 60%),
+    radial-gradient(80% 70% at 85% 60%, rgba(78, 216, 175, .07), transparent 60%);
+}
+.stephead {
+  position: relative; z-index: 2; flex: none;
+  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .24rem;
+  height: 1.16rem; padding: 0 .36rem 0 .26rem;
+  background: linear-gradient(180deg, rgba(8, 10, 9, .94), rgba(10, 13, 12, .6)); border-bottom: 1px solid var(--line);
+}
+.stephead::after { content: ''; position: absolute; left: .3rem; right: .3rem; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--mint-700), transparent 26%, transparent 74%, var(--mint-700)); }
+.stephead__left { display: flex; align-items: center; gap: .16rem; }
+.stephead__meta { display: flex; flex-direction: column; gap: .06rem; align-items: flex-start; }
+.stephead__center { display: flex; flex-direction: column; align-items: center; gap: .04rem; }
+.stephead__title { display: flex; align-items: baseline; gap: .02rem; font-size: .34rem; font-weight: 900; letter-spacing: .12em; }
+.stephead__title b { font-size: .56rem; line-height: 1; color: var(--mint-400); text-shadow: 0 0 .2rem rgba(23, 249, 183, .4); }
+.stephead__of { font-size: .26rem; color: var(--text-dim); margin-right: .18rem; }
+.stephead__right { justify-self: end; display: flex; align-items: center; gap: .24rem; }
+.stephead__right .countdown { --cd-h: .64rem; }
+
+.brief-h { display: flex; align-items: baseline; gap: .12rem; font-size: .21rem; font-weight: 700; letter-spacing: .1em; margin-bottom: .12rem; }
+.brief-h::before { content: ''; width: .06rem; height: .2rem; background: var(--mint-500); align-self: center; }
+
+/* ---- briefing layout ---- */
+.brief__main { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: 6.2rem 1fr; gap: .36rem; padding: .3rem .5rem .1rem; }
+.brief__left { display: flex; flex-direction: column; gap: .2rem; min-height: 0; }
+.brief__right { display: flex; flex-direction: column; gap: .2rem; min-height: 0; overflow: auto; padding-right: .06rem; }
+
+.brief-boss {
+  --bk-c: var(--orange-hi);
+  position: relative; display: grid; grid-template-columns: 2rem 1fr; gap: .2rem; padding: .22rem .24rem;
+  background: linear-gradient(135deg, rgba(60, 18, 8, .55), rgba(12, 14, 13, .85) 60%); border: 1px solid rgba(255, 110, 40, .3);
+}
+.brief-boss > .micro { position: absolute; left: .24rem; top: .1rem; }
+.brief-boss__art { position: relative; width: 2rem; height: 2rem; display: grid; place-items: center; margin-top: .12rem; }
+.brief-boss__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 110, 40, .5);
+  background: radial-gradient(circle, rgba(255, 60, 20, .25), transparent 65%); box-shadow: 0 0 .4rem rgba(255, 80, 30, .25), inset 0 0 .3rem rgba(255, 80, 30, .3); }
+.brief-boss__ring::after { content: ''; position: absolute; inset: .14rem; border-radius: 50%; border: 1px dashed rgba(255, 110, 40, .45); animation: spin 18s linear infinite; }
+.brief-boss__sil { position: relative; width: 74%; height: 74%; object-fit: cover; border-radius: 50%;
+  filter: grayscale(1) sepia(1) hue-rotate(-28deg) saturate(3.2) brightness(.62) contrast(1.35);
+  box-shadow: 0 0 0 2px rgba(255, 110, 40, .7), 0 0 .3rem rgba(255, 80, 30, .5); }
+.brief-boss__art::after { content: ''; position: absolute; inset: 13%; border-radius: 50%; pointer-events: none;
+  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 4px), radial-gradient(circle, transparent 45%, rgba(40, 8, 2, .75) 100%); }
+.brief-boss__q { font-size: 1rem; font-weight: 900; color: rgba(255, 110, 40, .6); }
+.brief-boss__text { display: flex; flex-direction: column; gap: .08rem; padding-top: .2rem; min-width: 0; }
+.brief-boss__name { font-size: .34rem; font-weight: 900; letter-spacing: .04em; line-height: 1.25; }
+.brief-boss__when { font-size: .15rem; color: var(--orange-hi); }
+.brief-boss__abil { margin: .04rem 0 0; padding-left: .18rem; display: flex; flex-direction: column; gap: .04rem; font-size: .14rem; line-height: 1.6; color: var(--text-md); }
+
+.brief-stage { display: flex; align-items: center; justify-content: space-between; gap: .2rem; padding: .12rem .18rem; background: rgba(12, 15, 14, .8); border: 1px solid var(--line); }
+.brief-stage__k { display: flex; align-items: baseline; gap: .12rem; min-width: 0; }
+.brief-stage__pool { font-size: .14rem; color: var(--text-lo); white-space: nowrap; }
+.brief-stage__name { display: flex; align-items: center; gap: .08rem; font-size: .19rem; font-weight: 700; }
+.brief-stage__name .icon { width: .2rem; height: .2rem; color: var(--mint-500); }
+
+.brief-factions { display: flex; flex-direction: column; gap: .1rem; min-height: 0; }
+.brief-faction { display: flex; gap: .14rem; align-items: center; padding: .12rem .16rem; background: rgba(12, 15, 14, .8); border: 1px solid var(--line); border-left: 3px solid var(--amber); }
+.brief-faction__icon { width: .72rem; height: .72rem; flex: none; display: grid; place-items: center; background: radial-gradient(circle, rgba(246, 163, 41, .16), transparent 70%); }
+.brief-faction__icon img { width: 100%; height: 100%; object-fit: contain; }
+.brief-faction__text { display: flex; flex-direction: column; gap: .03rem; }
+.brief-faction__text b { font-size: .2rem; color: var(--amber); }
+.brief-faction__text span { font-size: .15rem; color: var(--text-lo); }
+
+.brief-bonds { padding: .16rem .2rem .2rem; background: rgba(12, 15, 14, .8); border: 1px solid var(--line); }
+.brief-bonds__row { display: flex; flex-wrap: wrap; gap: .16rem .1rem; }
+.brief-bond { position: relative; width: 1rem; display: flex; justify-content: center; }
+.brief-bond .bond { --disc: .66rem; }
+.brief-bond .bond__name { font-size: .16rem; }
+.brief-bond__ban { position: absolute; top: -.04rem; right: .08rem; display: inline-flex; align-items: center; gap: .01rem; font-size: .12rem; font-weight: 700; padding: 0 .05rem; background: var(--red); color: #fff; line-height: 1.5; box-shadow: 0 0 0 1px #000; }
+.brief-bond__ban .icon { width: .12rem; height: .12rem; }
+.brief-bond.is-partial .bond__core { box-shadow: 0 0 0 2px rgba(255, 84, 84, .5); }
+.brief-legend { display: flex; align-items: center; gap: .08rem; flex-wrap: wrap; font-size: .14rem; color: var(--text-dim); margin-top: -.06rem; }
+.brief-legend__off { width: .16rem; height: .16rem; border-radius: 50%; background: #3a403d; border: 2px solid #555; }
+.brief-legend__ban { display: inline-grid; place-items: center; width: .2rem; height: .18rem; background: var(--red); color: #fff; }
+.brief-legend__ban .icon { width: .12rem; height: .12rem; }
+
+.brief-banned { padding: .16rem .2rem .2rem; background: rgba(12, 15, 14, .8); border: 1px solid var(--line); }
+.brief-banned__n { margin-left: auto; font-size: .22rem; color: var(--red-premium); }
+.brief-banned__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(.6rem, 1fr)); gap: .08rem; }
+.brief-banned__grid .uthumb { --ut: .6rem; }
+
+.brief__foot { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: flex-end; gap: .4rem; padding: .18rem .5rem .3rem; }
+.brief-ready { display: flex; align-items: center; gap: .16rem; }
+.brief-ready__txt { font-size: .2rem; color: var(--text-lo); }
+.brief-ready__txt b { font-size: .4rem; color: var(--mint-400); margin: 0 .02rem; }
+.brief-ready__txt span { font-size: .24rem; color: var(--text-dim); }
+.brief-ready__pips { display: flex; gap: .06rem; }
+.brief-ready__pips i { width: .3rem; height: .3rem; display: grid; place-items: center; color: var(--text-dim); }
+.brief-ready__pips i .icon { width: 100%; height: 100%; }
+.brief-ready__pips i.on { color: var(--mint-400); filter: drop-shadow(0 0 .06rem rgba(23, 249, 183, .6)); }
+.brief-ready__pips i.me { border-bottom: 2px solid var(--mint-700); }

public/css/screens/draft.css

@@ -0,0 +1,77 @@
+/* ==========================================================================================
+   screens/draft.css — BAND_DRAFT strategy pick (js/screens/bandDraft.js). Research 06 §4.2:
+   draft order on the left, portrait grid, detail pane with 初始生命值 and 确认选择 / 跳过.
+   ========================================================================================== */
+
+.draft__main { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: 3.9rem 1fr 5rem; gap: .3rem; padding: .3rem .42rem .36rem; }
+
+.draft-order { display: flex; flex-direction: column; gap: .1rem; min-height: 0; }
+.dorder {
+  position: relative; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .12rem;
+  padding: .1rem .12rem .1rem .08rem; background: rgba(12, 15, 14, .82); border: 1px solid var(--line);
+  transition: border-color var(--t-med), background var(--t-med);
+}
+.dorder .pavatar { --pa: .66rem; }
+.dorder__idx { font-size: .22rem; color: var(--text-dim); width: .26rem; text-align: center; }
+.dorder__text { display: flex; flex-direction: column; gap: .02rem; min-width: 0; }
+.dorder__name { font-size: .18rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .06rem; }
+.dorder__ai { font-family: var(--font-num); font-size: .11rem; padding: 0 .04rem; background: #a9c3d8; color: #0b1520; }
+.dorder__state { font-size: .14rem; }
+.dorder__state span { display: inline-flex; align-items: center; gap: .04rem; }
+.dorder__state .icon { width: .16rem; height: .16rem; }
+.dorder__box { position: relative; width: .6rem; height: .6rem; display: grid; place-items: center; border: 1px dashed var(--line-2); }
+.dorder__check { position: absolute; right: -.06rem; bottom: -.06rem; width: .22rem; height: .22rem; display: grid; place-items: center; background: var(--mint-500); color: var(--text-on-mint); }
+.dorder__check .icon { width: .16rem; height: .16rem; }
+.dorder__finger { width: .44rem; height: .44rem; animation: finger 1s ease-in-out infinite; }
+@keyframes finger { 50% { transform: translateX(-.06rem); } }
+.dorder.is-cur { border-color: var(--gold); background: linear-gradient(90deg, rgba(255, 198, 0, .12), rgba(12, 15, 14, .82)); box-shadow: 0 0 .2rem rgba(255, 198, 0, .15); }
+.dorder.is-done { border-color: var(--mint-800); }
+.dorder.is-self .dorder__name { color: var(--mint-400); }
+.draft-order__tip { margin-top: auto; font-size: .13rem; line-height: 1.6; color: var(--text-dim); }
+
+.draft-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(1.36rem, 1fr)); grid-auto-rows: min-content; gap: .12rem;
+  min-height: 0; overflow: auto; padding: .04rem .08rem .04rem .04rem; align-content: start;
+}
+.dband {
+  position: relative; display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .08rem .06rem .1rem;
+  background: rgba(12, 15, 14, .82); border: 1px solid var(--line); color: var(--text-md);
+  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
+}
+.dband:hover { transform: translateY(-.03rem); border-color: var(--line-3); }
+.dband .bandicon { --bi: 1.1rem; border: 1px solid var(--line-2); }
+.dband__name { font-size: .16rem; font-weight: 700; color: var(--text-hi); white-space: nowrap; }
+.dband__lp { display: inline-flex; align-items: center; gap: .04rem; font-size: .15rem; color: var(--mint-400); }
+.dband__lp i { width: .12rem; height: .14rem; background: var(--mint-500); clip-path: polygon(0 0, 30% 0, 30% 20%, 45% 20%, 45% 0, 55% 0, 55% 20%, 70% 20%, 70% 0, 100% 0, 100% 35%, 85% 50%, 85% 80%, 100% 90%, 100% 100%, 0 100%, 0 90%, 15% 80%, 15% 50%, 0 35%); }
+.dband__who { position: absolute; right: .04rem; top: .04rem; display: flex; flex-direction: column; gap: .02rem; }
+.dband__who .pavatar { --pa: .3rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--mint-400); }
+.dband.is-sel { border-color: var(--mint-400); background: linear-gradient(180deg, rgba(78, 216, 175, .18), rgba(12, 15, 14, .85)); box-shadow: 0 0 0 1px var(--mint-400), 0 0 .24rem rgba(23, 249, 183, .2); }
+.dband.is-mine::after { content: '已选择'; position: absolute; left: 0; top: 0; font-size: .11rem; font-weight: 700; padding: 0 .06rem; background: var(--mint-500); color: var(--text-on-mint); }
+
+.draft-detail {
+  display: flex; flex-direction: column; align-items: center; gap: .12rem; padding: .26rem .26rem .22rem; min-height: 0;
+  background: linear-gradient(180deg, rgba(20, 30, 26, .9), rgba(10, 13, 12, .92)); border: 1px solid var(--line-2);
+}
+.draft-detail__art { position: relative; padding: .06rem; border: 1px solid var(--mint-800); background: radial-gradient(circle, rgba(78, 216, 175, .14), transparent 70%); }
+.draft-detail__art .bandicon { --bi: 2rem; }
+.draft-detail__hp { display: flex; align-items: center; gap: .12rem; font-size: .16rem; color: var(--text-lo); }
+.draft-detail__name { font-size: .42rem; font-weight: 900; letter-spacing: .1em; }
+.draft-detail__eff { align-self: stretch; display: flex; flex-direction: column; gap: .06rem; padding: .12rem .14rem; background: rgba(0, 0, 0, .3); border-left: 3px solid var(--mint-500); flex: 1; min-height: 0; overflow: auto; }
+.draft-detail__eff b { font-size: .2rem; color: var(--mint-400); }
+.draft-detail__desc { font-size: .16rem; line-height: 1.7; color: var(--text-md); }
+.draft-detail__actions { align-self: stretch; display: flex; flex-direction: column; gap: .1rem; }
+.draft-detail__status { display: flex; align-items: center; gap: .06rem; font-size: .15rem; color: var(--text-lo); }
+.draft-detail__status .icon { width: .18rem; height: .18rem; }
+.draft-detail__btns { display: flex; gap: .1rem; }
+.draft-detail__btns .btn { flex: 1; }
+.dorder__secs { margin-left: .06rem; font-size: .15rem; color: var(--gold); }
+/* 队友已选 (research 09 §5): a strategy a teammate picked cannot be chosen again */
+.dband.is-taken { cursor: not-allowed; border-color: rgba(246, 163, 41, .35); }
+.dband.is-taken .bandicon, .dband.is-taken .dband__name, .dband.is-taken .dband__lp { filter: grayscale(.8) brightness(.62); }
+.dband.is-taken:hover { transform: none; }
+.dband__taken {
+  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg); white-space: nowrap; pointer-events: none;
+  padding: .02rem .12rem; font-size: .15rem; font-weight: 900; letter-spacing: .16em; color: #1d1400; background: var(--amber);
+  box-shadow: 0 .03rem .1rem rgba(0, 0, 0, .6);
+}
+.draft-detail__status--taken { color: var(--amber); }

public/css/screens/game-panels.css

@@ -0,0 +1,504 @@
+/* ==========================================================================================
+   screens/game-panels.css — rich text, unit thumbnails & glyphs (gameComponents.js), detail panel,
+   bond popup, enemy / match-info drawer, 机变 overlay.
+   ========================================================================================== */
+
+/* ---- rich text (official markup, js/ui/richText.js) ---- */
+.rt { white-space: normal; }
+.rt-vup { color: #3fb6ff; }
+.rt-vdown { color: #ff6a4a; }
+.rt-rem { color: #f49800; }
+.rt-note { color: var(--text-lo); }
+.rt-kw { color: #2fd0ff; }
+.rt-mint { color: var(--mint-400); }
+.rt-hl { color: var(--gold-2); }
+.rt-term { color: #9fd4ff; border-bottom: 1px dotted rgba(159, 212, 255, .6); }
+
+/* ---- unit thumbnail ---- */
+.uthumb {
+  --ut: .72rem; --tc: var(--tier-1);
+  position: relative; display: inline-block; width: var(--ut); height: var(--ut); flex: none;
+}
+.uthumb--xs { --ut: .34rem; } .uthumb--sm { --ut: .54rem; } .uthumb--lg { --ut: 1.1rem; }
+.uthumb--t1 { --tc: var(--tier-1); } .uthumb--t2 { --tc: var(--tier-2); } .uthumb--t3 { --tc: var(--tier-3); }
+.uthumb--t4 { --tc: var(--tier-4); } .uthumb--t5 { --tc: var(--tier-5); } .uthumb--t6 { --tc: var(--tier-6); }
+.uthumb__art {
+  position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center;
+  background: linear-gradient(160deg, #1a201d, #111513); background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 30%, #1a201d), #111513);
+  border: 1px solid var(--tc); border: 1px solid color-mix(in srgb, var(--tc) 60%, var(--line-2));
+  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ut) * .16), calc(100% - var(--ut) * .16) 100%, 0 100%);
+}
+.uthumb__art img { width: 100%; height: 100%; object-fit: cover; }
+.uthumb--item .uthumb__art img { object-fit: contain; width: 84%; height: 84%; }
+.uthumb--enemy .uthumb__art { background: linear-gradient(160deg, #3a1c18, #140d0c); border-color: rgba(255, 90, 74, .45); }
+.uthumb__glyph { font-weight: 900; font-size: calc(var(--ut) * .44); color: var(--text-md); }
+.uthumb__tier { position: absolute; left: -.03rem; top: -.03rem; transform: scale(.82); transform-origin: top left; }
+.uthumb--xs .uthumb__tier, .uthumb--sm .uthumb__tier { transform: scale(.66); }
+.uthumb.is-golden .uthumb__art { border-color: var(--gold); box-shadow: inset 0 0 calc(var(--ut) * .18) rgba(255, 198, 0, .45); }
+.uthumb.is-golden::after { content: ''; position: absolute; inset: -2px; border: 1px solid rgba(255, 198, 0, .7); pointer-events: none; clip-path: inherit; }
+.uthumb.is-dim .uthumb__art img { filter: grayscale(.85) brightness(.55); }
+.uthumb__tag { position: absolute; right: 0; bottom: 0; font-size: calc(var(--ut) * .17); line-height: 1.2; padding: 0 .03rem; background: #a9c3d8; color: #0b1520; font-weight: 700; }
+
+.bglyph { display: inline-grid; place-items: center; width: .24rem; height: .24rem; flex: none; }
+.bglyph img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(.86) sepia(.4) hue-rotate(110deg) saturate(2.5); }
+.bglyph__txt { font-weight: 900; font-size: .15rem; color: var(--mint-400); }
+.bandicon { --bi: .6rem; display: inline-grid; place-items: center; width: var(--bi); height: var(--bi); flex: none; overflow: hidden; background: #111513; }
+.bandicon img { width: 100%; height: 100%; object-fit: cover; }
+.bandicon__txt { font-weight: 900; font-size: calc(var(--bi) * .44); color: var(--mint-400); }
+.bandicon--xs { --bi: .26rem; } .bandicon--sm { --bi: .42rem; } .bandicon--lg { --bi: 1.14rem; } .bandicon--xl { --bi: 2.2rem; }
+.sprite { object-fit: contain; }
+
+/* ---- detail panel ---- */
+.dpanel {
+  --bk-c: var(--mint-500);
+  position: absolute; left: 2.3rem; top: 2.1rem; bottom: 1.02rem; width: 4.9rem; max-height: 8.4rem; z-index: 9;
+  display: flex; flex-direction: column;
+  background: rgba(11, 15, 13, .97); border: 1px solid var(--line-2); box-shadow: 0 .14rem .4rem rgba(0, 0, 0, .65);
+  animation: panel-in var(--t-slow) var(--ease-out);
+}
+@keyframes panel-in { from { opacity: 0; transform: translateX(-.3rem); } }
+/* docked right (the selected unit's underframe is on the left: gameLogic panelSide / panelSlots — keep the insets in
+   sync with PANEL_RIGHT_GAP / PANEL_RIGHT_BOTTOM(_SHOP)); above the shop bar while it is open */
+.dpanel--right { left: auto; right: .9rem; bottom: 1.02rem; animation-name: panel-in-r; }
+.dpanel--right.is-shop { bottom: 3.78rem; }
+@keyframes panel-in-r { from { opacity: 0; transform: translateX(.3rem); } }
+.dpanel__close { position: absolute; right: .08rem; top: .08rem; z-index: 2; width: .38rem; height: .38rem; display: grid; place-items: center; background: rgba(0, 0, 0, .5); border: 1px solid var(--line-2); color: var(--text-lo); }
+.dpanel__close:hover { color: #fff; border-color: var(--line-3); }
+.dpanel__close .icon { width: .2rem; height: .2rem; }
+.dpanel__scroll { flex: 1; min-height: 0; overflow: auto; padding: .18rem .2rem .2rem; display: flex; flex-direction: column; gap: .14rem; }
+.dhead { display: flex; gap: .16rem; }
+.dhead__art { position: relative; width: 1.3rem; height: 1.9rem; flex: none; overflow: hidden; background: linear-gradient(180deg, #1c2421, #0e1210); border: 1px solid var(--line-2); }
+.dhead__art img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
+.dhead__art.is-golden { border-color: var(--gold); box-shadow: 0 0 .16rem rgba(255, 198, 0, .35); }
+.dhead__art .uthumb { margin: .4rem auto; display: block; }
+.dhead__icon { width: 1.1rem; height: 1.1rem; flex: none; display: grid; place-items: center; background: radial-gradient(circle, #26302c, #111513); border: 1px solid var(--line-2); }
+.dhead__icon img { width: 88%; height: 88%; object-fit: contain; }
+.dhead__icon .icon { width: .5rem; height: .5rem; color: var(--mint-500); }
+.dhead__icon.is-golden { border-color: var(--gold); }
+.dhead__icon--enemy { background: radial-gradient(circle, #3a1c18, #140d0c); border-color: rgba(255, 90, 74, .45); }
+.dhead__icon--enemy.is-boss { border-color: var(--orange-hi); box-shadow: 0 0 .18rem rgba(255, 110, 40, .45); }
+.dhead__icon--enemy.is-elite { border-color: var(--gold-2); }
+.dhead__info { display: flex; flex-direction: column; gap: .05rem; min-width: 0; padding-top: .02rem; flex: 1; }
+.dhead__chips { display: flex; align-items: center; gap: .08rem; flex-wrap: wrap; }
+.dhead__name { font-size: .32rem; font-weight: 900; letter-spacing: .04em; line-height: 1.2; }
+.dhead__en { font-family: var(--font-display); font-size: .12rem; letter-spacing: .2em; color: var(--text-dim); text-transform: uppercase; }
+.dhead__flavor { font-size: .13rem; color: var(--text-lo); font-style: italic; }
+.dhead__class { display: flex; align-items: center; gap: .06rem; flex-wrap: wrap; font-size: .15rem; color: var(--text-md); margin-top: .06rem; }
+.dhead__class .sep { width: 1px; height: .16rem; background: var(--line-2); }
+.dhead__prof, .dhead__sub { width: .24rem; height: .24rem; object-fit: contain; }
+.dhead__pos { font-size: .12rem; padding: 0 .06rem; border: 1px solid var(--line-2); color: var(--text-lo); }
+.dtag-elite, .dtag-token, .dtag-kind { font-size: .13rem; font-weight: 700; padding: .01rem .08rem; letter-spacing: .08em; }
+.dtag-elite { background: var(--gold); color: #1d1400; }
+.dtag-token { background: #a9c3d8; color: #0b1520; }
+.dtag-kind { border: 1px solid var(--line-2); color: var(--text-lo); font-weight: 500; }
+.drank { font-size: .13rem; font-weight: 700; padding: .01rem .08rem; }
+.drank--normal { background: var(--bg-4); color: var(--text-md); }
+.drank--elite { background: var(--gold-2); color: #1d1400; }
+.drank--boss { background: var(--orange); color: #fff; }
+.dhp { position: relative; height: .18rem; margin-top: .08rem; background: #0a0d0c; border: 1px solid var(--line-2); }
+.dhp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2bb65a, #56e08a); }
+.dhp--enemy i { background: linear-gradient(90deg, #b5261a, #ff5a4a); }
+.dhp span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .12rem; color: #fff; text-shadow: 0 1px 2px #000; }
+.dtrait { display: flex; gap: .08rem; align-items: flex-start; font-size: .14rem; line-height: 1.6; color: var(--text-md); padding: .08rem .1rem; background: rgba(255, 255, 255, .03); border-left: 2px solid var(--line-3); }
+.dtrait .icon { width: .16rem; height: .16rem; margin-top: .03rem; color: var(--text-lo); flex: none; }
+.dstats-wrap { display: flex; gap: .12rem; align-items: stretch; }
+.dstats { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
+.dstat { display: flex; align-items: baseline; justify-content: space-between; gap: .06rem; padding: .05rem .1rem; background: #0f1311; }
+.dstat__k { font-size: .13rem; color: var(--text-lo); white-space: nowrap; }
+.dstat__v { font-size: .18rem; color: #fff; }
+.dstat small { font-size: .11rem; color: var(--text-dim); margin-left: .04rem; }
+.drange { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .06rem; padding: .06rem .1rem; background: #0f1311; border: 1px solid var(--line); min-width: 1.1rem; }
+.rgrid { --rg: .14rem; display: grid; gap: 2px; }
+.rgrid i { width: var(--rg); height: var(--rg); border: 1px solid rgba(255, 255, 255, .06); }
+.rgrid i.on { background: rgba(246, 163, 41, .25); border-color: var(--amber); }
+.rgrid i.self { background: var(--mint-500); border-color: var(--mint-400); }
+.dsec { display: flex; flex-direction: column; gap: .08rem; }
+.dsec__title { display: flex; align-items: baseline; gap: .1rem; font-size: .17rem; font-weight: 700; color: var(--mint-400); padding-bottom: .04rem; border-bottom: 1px solid var(--line); }
+.dtext { font-size: .15rem; line-height: 1.65; color: var(--text-md); }
+.dskill { display: flex; gap: .12rem; align-items: center; }
+.dskill__icon { width: .62rem; height: .62rem; flex: none; object-fit: cover; border: 1px solid var(--line-3); background: #0a0d0c; }
+.dskill__icon--empty { display: grid; place-items: center; }
+.dskill__icon--empty b { font-family: var(--font-display); font-size: .2rem; color: var(--mint-400); letter-spacing: .02em; }
+.dskill__slot { display: inline-block; margin-right: .06rem; padding: 0 .05rem; vertical-align: .02rem; font-family: var(--font-display);
+  font-size: .12rem; line-height: 1.5; color: var(--text-lo); border: 1px solid var(--line-3); }
+.dskill__meta { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
+.dskill__name { font-size: .19rem; }
+.dskill__tags { display: flex; flex-wrap: wrap; gap: .06rem; align-items: center; }
+.dsp { font-size: .12rem; padding: 0 .06rem; line-height: 1.6; font-weight: 700; }
+.dsp--time { background: #7fd37a; color: #0b1a0a; }
+.dsp--atk { background: #ff8a3d; color: #1f0c00; }
+.dsp--def { background: #f2bd3e; color: #1f1400; }
+.dsp--trig { border: 1px solid var(--line-3); color: var(--text-lo); font-weight: 500; }
+.dsp__num { display: inline-flex; align-items: center; gap: .03rem; font-size: .13rem; color: var(--text-lo); }
+.dsp__num b { color: #fff; }
+.dsp__num .icon { width: .14rem; height: .14rem; color: var(--gold); }
+.dtalent { display: flex; flex-direction: column; gap: .02rem; }
+.dtalent b { font-size: .15rem; color: var(--text-hi); }
+.dgarrison { display: flex; flex-direction: column; gap: .06rem; }
+.dgarrison__type { display: inline-flex; align-self: flex-start; align-items: center; gap: .05rem; font-size: .13rem; color: var(--gold-2); padding: .01rem .08rem .01rem .04rem; border: 1px solid rgba(242, 189, 62, .4); }
+.dgarrison__icon { width: .2rem; height: .2rem; object-fit: contain; }
+.dbonds { display: flex; flex-wrap: wrap; gap: .08rem; }
+.dbond { display: inline-flex; align-items: center; gap: .05rem; padding: .03rem .1rem .03rem .05rem; font-size: .15rem; background: rgba(78, 216, 175, .08); border: 1px solid var(--mint-800); color: var(--mint-400); }
+/* the unit's bonds in the header's right column, right under name / class (user playtest #2 item 9): icon, name,
+   count / next threshold, tier pips — visible as soon as the card opens */
+.dbonds--top { gap: .05rem; margin-top: .06rem; }
+.dhead__info .dbonds--top .dbond { font-size: .14rem; padding: .02rem .07rem .02rem .03rem; }
+.dhead__info .dbond__icon { width: .24rem; height: .24rem; }
+.dbonds--top .dbond { gap: .06rem; padding: .03rem .08rem .03rem .04rem; font: inherit; font-size: .15rem; color: var(--text-md);
+  background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2); cursor: default; }
+.dbonds--top button.dbond { cursor: pointer; }
+.dbonds--top button.dbond:hover { border-color: var(--mint-500); color: #fff; }
+.dbonds--top .dbond.is-active { color: var(--mint-400); background: rgba(78, 216, 175, .1); border-color: var(--mint-700); }
+.dbonds--top .dbond.is-core .dbond__name { font-weight: 700; }
+.dbond__icon { width: .26rem; height: .26rem; }
+.dbond:not(.is-active) .dbond__icon img { filter: brightness(0) invert(.6); }
+.dbond__count { font-size: .15rem; color: #fff; }
+.dbond__count small { font-size: .11rem; color: var(--text-dim); }
+.dbond__count.is-max { color: var(--gold-2); }
+.dbond__tiers { display: inline-flex; gap: 2px; margin-left: .02rem; }
+.dbond__tiers i { width: .05rem; height: .12rem; background: rgba(255, 255, 255, .16); transform: skewX(-18deg); }
+.dbond__tiers i.on { background: var(--mint-400); box-shadow: 0 0 .04rem rgba(78, 216, 175, .8); }
+.dtag-loadout { display: inline-block; margin-left: .08rem; vertical-align: .02rem; font-size: .11rem; font-weight: 700; letter-spacing: .06em;
+  padding: 0 .06rem; line-height: 1.6; background: var(--mint-500); color: #062019; }
+.dmodule { display: flex; align-items: center; flex-wrap: wrap; gap: .08rem; font-size: .15rem; }
+.dmodule__name { color: var(--text-hi); }
+/* official module type icon (local-client art, white glyph) on a dark tile; the type letter without it */
+.dmodule__icon { flex: none; display: inline-grid; place-items: center; width: .4rem; height: .4rem; background: linear-gradient(180deg, #2a322f, #151a18); border: 1px solid var(--gold-2); border: 1px solid color-mix(in srgb, var(--gold-2) 60%, transparent); }
+.dmodule__icon img { width: 80%; height: 80%; object-fit: contain; }
+.dmodule__icon b { font-size: .2rem; font-weight: 700; line-height: 1; color: var(--gold-2); }
+.dmodule__type { font-family: var(--font-display); font-size: .12rem; letter-spacing: .1em; padding: 0 .06rem; border: 1px solid var(--line-3); color: var(--text-lo); }
+.dmodule.is-none .dmodule__name { color: var(--text-dim); font-weight: 500; }
+.ditem { display: flex; gap: .1rem; align-items: flex-start; }
+.ditem__text { display: flex; flex-direction: column; gap: .02rem; min-width: 0; }
+.ditem__text b { font-size: .15rem; }
+.ditem__desc { font-size: .13rem; line-height: 1.55; color: var(--text-lo); }
+.dempty { font-size: .14rem; }
+.dhint { display: flex; align-items: flex-start; gap: .06rem; font-size: .14rem; color: var(--text-lo); line-height: 1.6; }
+.dhint .icon { width: .16rem; height: .16rem; margin-top: .03rem; flex: none; }
+.dactions { display: flex; justify-content: flex-end; gap: .1rem; padding-top: .06rem; border-top: 1px solid var(--line); }
+.dsell { margin-left: .06rem; color: #1d1400; }
+.dfactions { display: flex; flex-wrap: wrap; gap: .06rem; }
+.dfaction { display: inline-flex; align-items: center; gap: .04rem; font-size: .13rem; color: var(--amber); padding: 0 .08rem 0 .02rem; border: 1px solid rgba(246, 163, 41, .45); }
+.dfaction img { width: .22rem; height: .22rem; object-fit: contain; }
+.dabil { margin: 0; padding-left: .2rem; display: flex; flex-direction: column; gap: .05rem; font-size: .15rem; line-height: 1.6; color: var(--text-md); }
+
+/* ---- bond popup ---- */
+.bpop {
+  position: absolute; left: 2.3rem; top: 2.1rem; width: 5.4rem; max-height: calc(100% - 2.4rem); z-index: 8; overflow: auto;
+  display: flex; flex-direction: column; gap: .12rem; padding: .2rem .22rem;
+  background: rgba(11, 15, 13, .97); border: 1px solid var(--line-2); box-shadow: 0 .14rem .4rem rgba(0, 0, 0, .65);
+  animation: pop-in var(--t-med) var(--ease-out);
+}
+/* placement (gameLogic bondPopupPlace / BPOP — keep in sync): beside the left-docked detail card, left of the
+   right-docked one, against the right edge, or over the card it was opened from — never over the selected unit's
+   underframe when a place is free */
+.bpop--beside { left: 7.32rem; z-index: 10; }
+.bpop--besideR { left: auto; right: 5.92rem; z-index: 10; }
+.bpop--right { left: auto; right: .9rem; z-index: 10; }
+.bpop.is-over { z-index: 10; background: rgb(11, 15, 13); }
+.bpop__close { position: absolute; right: .08rem; top: .08rem; width: .36rem; height: .36rem; display: grid; place-items: center; background: none; border: 1px solid var(--line-2); color: var(--text-lo); }
+.bpop__close .icon { width: .18rem; height: .18rem; }
+.bpop__head { display: flex; gap: .16rem; align-items: center; }
+.bpop__disc { width: .86rem; height: .86rem; border-radius: 50%; display: grid; place-items: center; background: #1b2320; border: 3px solid rgba(255, 255, 255, .14); flex: none; }
+.bpop__disc .bglyph { width: .56rem; height: .56rem; }
+.bpop__disc .bglyph img { filter: brightness(0) invert(.8); }
+.bpop__disc.is-active { background: var(--mint-500); border-color: var(--mint-400); box-shadow: 0 0 .24rem rgba(23, 249, 183, .45); }
+.bpop__disc.is-active .bglyph img { filter: brightness(0) opacity(.85); }
+.bpop__titles { display: flex; flex-direction: column; gap: .02rem; min-width: 0; }
+.bpop__name { font-size: .32rem; font-weight: 900; letter-spacing: .08em; }
+.bpop__facts { display: flex; gap: .16rem; font-size: .15rem; color: var(--text-lo); }
+.bpop__facts b { color: #fff; font-size: .18rem; }
+.bpop__facts small { font-size: .12rem; }
+.bpop__tiers { display: flex; gap: .06rem; }
+.bpop__tier { display: flex; align-items: baseline; gap: .02rem; padding: .02rem .12rem; border: 1px solid var(--line-2); color: var(--text-dim); font-size: .13rem; }
+.bpop__tier b { font-size: .2rem; }
+.bpop__tier.is-on { background: var(--mint-500); color: var(--text-on-mint); border-color: var(--mint-400); }
+.bpop__sec { display: flex; flex-direction: column; gap: .06rem; }
+.bpop__sec h4 { font-size: .16rem; color: var(--mint-400); display: flex; align-items: baseline; gap: .08rem; }
+.bpop__sec h4 small { font-size: .13rem; color: var(--text-lo); font-weight: 400; }
+.bpop__sec--now { padding: .1rem .12rem; background: rgba(78, 216, 175, .06); border-left: 3px solid var(--mint-500); }
+.bpop__desc { font-size: .15rem; line-height: 1.7; color: var(--text-md); }
+.bpop__members { display: grid; grid-template-columns: repeat(5, 1fr); gap: .08rem; }
+.bpop__member { position: relative; display: flex; flex-direction: column; align-items: center; gap: .03rem; padding: .04rem 0; background: none; border: 1px solid transparent; }
+.bpop__member:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .03); }
+.bpop__member.is-on .uthumb__art { border-color: var(--mint-400); box-shadow: 0 0 .1rem rgba(23, 249, 183, .45); }
+.bpop__mname { font-size: .12rem; color: var(--text-lo); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bpop__member.is-on .bpop__mname { color: var(--mint-400); }
+.bpop__member.is-owned .bpop__mname { color: var(--text-hi); }
+.bpop__ban { position: absolute; top: .02rem; right: .1rem; width: .2rem; height: .2rem; display: grid; place-items: center; background: var(--red); color: #fff; border-radius: 50%; }
+.bpop__ban .icon { width: .14rem; height: .14rem; }
+
+/* ---- enemy / info drawer ---- */
+.edrawer {
+  --bk-c: var(--amber);
+  position: absolute; left: 50%; top: 1.08rem; transform: translateX(-50%); width: 7.4rem; max-height: calc(100% - 4.4rem); z-index: 9;
+  display: flex; flex-direction: column; background: rgba(11, 15, 13, .97); border: 1px solid var(--line-2); box-shadow: 0 .14rem .4rem rgba(0, 0, 0, .65);
+  animation: drawer-in var(--t-slow) var(--ease-out);
+}
+@keyframes drawer-in { from { opacity: 0; transform: translate(-50%, -.2rem); } }
+.edrawer__top { display: flex; align-items: flex-end; justify-content: space-between; padding: .08rem .12rem 0 .16rem; border-bottom: 1px solid var(--line); }
+.edrawer__top .tabs { border-bottom: 0; }
+.edrawer__close { width: .34rem; height: .34rem; margin-bottom: .06rem; display: grid; place-items: center; background: none; border: 1px solid var(--line-2); color: var(--text-lo); }
+.edrawer__close .icon { width: .18rem; height: .18rem; }
+.edrawer__body { overflow: auto; padding: .14rem .18rem .18rem; display: flex; flex-direction: column; gap: .12rem; }
+.edrawer__sum { display: flex; align-items: center; justify-content: space-between; gap: .12rem; flex-wrap: wrap; font-size: .15rem; color: var(--text-md); }
+.edrawer__sum b { font-size: .19rem; }
+.edrawer__empty { display: flex; align-items: center; gap: .08rem; justify-content: center; padding: .3rem; color: var(--text-dim); font-size: .16rem; }
+.edrawer__empty .icon { width: .24rem; height: .24rem; }
+.fchips { display: flex; gap: .06rem; flex-wrap: wrap; }
+.fchip { display: inline-flex; align-items: center; gap: .04rem; padding: 0 .1rem 0 .02rem; font-size: .13rem; color: var(--amber); border: 1px solid rgba(246, 163, 41, .45); background: rgba(246, 163, 41, .06); }
+.fchip__icon { width: .26rem; height: .26rem; object-fit: contain; }
+.elist { display: grid; grid-template-columns: 1fr 1fr; gap: .08rem; }
+.erow { display: flex; align-items: center; gap: .1rem; padding: .06rem .12rem .06rem .06rem; background: rgba(255, 255, 255, .025); border: 1px solid var(--line); text-align: left; color: inherit; transition: border-color var(--t-fast), background var(--t-fast); }
+.erow:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .05); }
+.erow--boss { border-color: rgba(255, 110, 40, .6); background: rgba(232, 90, 26, .1); }
+.erow--bounty { border-color: rgba(255, 198, 0, .45); }
+.erow__text { display: flex; flex-direction: column; gap: .03rem; min-width: 0; flex: 1; }
+.erow__name { font-size: .16rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.erow__tags { display: flex; gap: .04rem; flex-wrap: wrap; }
+.erow__count { font-size: .26rem; color: #fff; }
+.etag { font-size: .11rem; line-height: 1.5; padding: 0 .05rem; font-weight: 700; }
+.etag--boss { background: var(--orange); color: #fff; }
+.etag--bounty { background: var(--gold); color: #1d1400; }
+.etag--escort { background: var(--bg-4); color: var(--text-md); }
+.etag--elite { background: var(--gold-2); color: #1d1400; }
+.etag--fly { background: #2c4a63; color: #cfe8ff; }
+.etag--faction { border: 1px solid rgba(246, 163, 41, .5); color: var(--amber); font-weight: 500; }
+.eboss { display: flex; gap: .12rem; align-items: center; padding: .1rem .12rem; border: 1px solid rgba(255, 110, 40, .45); background: linear-gradient(90deg, rgba(232, 90, 26, .14), transparent); }
+.eboss > div { display: flex; flex-direction: column; gap: .02rem; }
+.eboss b { font-size: .19rem; }
+.eboss .t-lo { font-size: .13rem; }
+.iband { display: flex; gap: .12rem; align-items: flex-start; padding: .1rem; background: rgba(78, 216, 175, .05); border: 1px solid var(--mint-800); }
+.iband > div { display: flex; flex-direction: column; gap: .03rem; min-width: 0; }
+.iband b { font-size: .19rem; }
+.iband b small { font-size: .14rem; font-weight: 400; margin-left: .06rem; }
+.iband__desc { font-size: .14rem; line-height: 1.6; color: var(--text-md); }
+.istage { display: flex; align-items: center; gap: .06rem; font-size: .15rem; color: var(--text-lo); }
+.istage .icon { width: .18rem; height: .18rem; color: var(--mint-500); }
+.istage b { color: var(--text-hi); }
+.ihead { font-size: .16rem; color: var(--mint-400); display: flex; gap: .08rem; align-items: baseline; }
+.ihead small { color: var(--text-lo); font-size: .14rem; }
+.ibonds { display: flex; flex-wrap: wrap; gap: .06rem; }
+.ibond { display: inline-flex; align-items: center; gap: .05rem; padding: .03rem .08rem .03rem .04rem; font-size: .14rem; border: 1px solid var(--line-2); color: var(--text-md); }
+.ibond.is-off { color: var(--text-dim); background: rgba(255, 255, 255, .02); text-decoration: line-through; text-decoration-color: rgba(255, 84, 84, .6); }
+.ibond.is-off .bglyph img { filter: grayscale(1) brightness(.5); }
+.ibond__ban { display: inline-flex; align-items: center; gap: .02rem; font-size: .12rem; padding: 0 .05rem; background: var(--red); color: #fff; text-decoration: none; }
+.ibond__ban .icon { width: .12rem; height: .12rem; }
+.ibanned { display: flex; flex-wrap: wrap; gap: .06rem; }
+.ibanned__one { padding: 0; background: none; border: 0; }
+
+/* ---- 机变 overlay ---- */
+.spov { position: absolute; inset: 0 0 0 2.8rem; z-index: 20; }
+.gm.has-sp .gm__bonds, .gm.has-sp .gm__effects { opacity: 0; pointer-events: none; transition: opacity var(--t-med); }
+.spov__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 7, 6, .6) 0, rgba(4, 7, 6, .9) .5rem, rgba(4, 7, 6, .92)); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border-left: 1px solid var(--line); }
+.spov__inner { position: absolute; left: .3rem; right: .5rem; top: 1.14rem; bottom: .5rem; display: flex; flex-direction: column; gap: .16rem; animation: screen-in var(--t-slow) var(--ease-out); }
+.spov__head { display: flex; align-items: flex-end; justify-content: space-between; gap: .3rem; }
+.spov__titles { display: flex; flex-direction: column; gap: .04rem; }
+.spov__title { display: flex; align-items: baseline; gap: .14rem; font-size: .5rem; font-weight: 900; letter-spacing: .08em; color: #eafff8; text-shadow: 0 0 .2rem rgba(23, 249, 183, .35); }
+.spov__title.is-special { color: var(--gold-2); text-shadow: 0 0 .2rem rgba(242, 189, 62, .35); }
+.spov__bar { color: var(--mint-700); font-weight: 400; }
+.spov__desc { font-size: .22rem; font-weight: 400; color: var(--text-lo); letter-spacing: .04em; text-shadow: none; }
+.spov__sub { font-size: .15rem; color: var(--text-dim); }
+.spov__turn { display: flex; align-items: center; gap: .24rem; }
+.spov__turntxt { display: flex; align-items: center; gap: .08rem; font-size: .24rem; font-weight: 700; color: var(--text-md); }
+.spov__turntxt .icon { width: .26rem; height: .26rem; }
+.spov__turntxt.is-mine { color: var(--gold); text-shadow: 0 0 .16rem rgba(255, 198, 0, .45); animation: blink 1.2s ease-in-out infinite; }
+.spov__turntxt.is-done { color: var(--mint-400); }
+.spov__order { display: flex; gap: .1rem; }
+.spov__who { display: flex; align-items: center; gap: .08rem; padding: .05rem .12rem .05rem .06rem; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
+.spov__who.is-cur { border-color: var(--gold); background: rgba(255, 198, 0, .08); }
+.spov__who.is-done { border-color: var(--mint-800); }
+.spov__who.is-self .spov__wname { color: var(--mint-400); }
+.spov__idx { font-size: .16rem; color: var(--text-dim); width: .2rem; text-align: center; }
+.spov__wname { font-size: .15rem; max-width: 1.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.spov__wstate { display: grid; }
+.spov__wstate .icon { width: .2rem; height: .2rem; }
+.spov__who.is-done .spov__wstate { color: var(--mint-400); }
+.spov__who.is-cur .spov__wstate { color: var(--gold); }
+.spov__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: .2rem; }
+.spov__grid--3 { grid-template-columns: repeat(3, minmax(0, 4.3rem)); grid-template-rows: minmax(0, 5rem); justify-content: center; align-content: start; gap: .36rem; margin-top: .3rem; }
+.spov__grid--3 .spcard { justify-content: flex-start; padding-top: .62rem; }
+.spov__grid--3 .spcard__icon { width: 1.6rem; height: 1.6rem; margin-bottom: .1rem; }
+.spov__grid--3 .spcard--bounty .spcard__icon { width: 1.4rem; height: 1.4rem; }
+.spcard {
+  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem; padding: .3rem .3rem .24rem; overflow: hidden; text-align: center;
+  background: linear-gradient(180deg, rgba(210, 224, 219, .12), rgba(120, 140, 132, .06)); border: 1px solid rgba(200, 220, 212, .25); color: var(--text-hi);
+  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), background var(--t-fast), opacity var(--t-med);
+}
+.spcard__glow { position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 0%, rgba(78, 216, 175, .16), transparent 70%); pointer-events: none; }
+.spcard.is-pickable { cursor: pointer; }
+.spcard.is-pickable:hover { transform: translateY(-.06rem); border-color: var(--mint-400); background: linear-gradient(180deg, rgba(78, 216, 175, .18), rgba(78, 216, 175, .05)); box-shadow: 0 0 0 1px var(--mint-400), 0 .1rem .3rem rgba(23, 249, 183, .2); }
+.spcard:disabled { cursor: default; }
+.spcard.is-taken { background: rgba(120, 140, 132, .05); }
+.spcard.is-taken > :not(.spcard__taker) { opacity: .38; filter: grayscale(.7); }
+.spcard.is-mine { border-color: var(--mint-400); box-shadow: inset 0 0 0 1px var(--mint-400); }
+.spcard.is-mine > :not(.spcard__taker) { opacity: 1; filter: none; }
+.spcard__tier { position: absolute; left: .12rem; top: .12rem; }
+.spcard__icon { width: 1.3rem; height: 1.3rem; display: grid; place-items: center; flex: none; }
+.spcard__icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .06rem .12rem rgba(0, 0, 0, .6)); }
+.spcard__icon .icon { width: .7rem; height: .7rem; color: var(--mint-500); }
+.spcard--bounty .spcard__icon { width: 1.1rem; height: 1.1rem; border: 2px solid rgba(255, 90, 74, .5); background: radial-gradient(circle, #3a1c18, #140d0c); }
+.spcard--bounty .spcard__icon img { object-fit: cover; }
+.spcard__body { display: flex; flex-direction: column; align-items: center; gap: .08rem; min-height: 0; }
+.spcard__name { font-size: .26rem; font-weight: 900; letter-spacing: .06em; }
+.spcard__desc { font-size: .16rem; line-height: 1.65; color: var(--text-md); max-width: 4.6rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
+.spov__grid--3 .spcard__desc { -webkit-line-clamp: 8; }
+.spcard__tags { display: flex; gap: .08rem; }
+.spcard__tag { font-size: .13rem; font-weight: 700; padding: .01rem .08rem; }
+.spcard__tag--team { background: var(--mint-500); color: var(--text-on-mint); }
+.spcard__tag--coin { background: var(--gold); color: #1d1400; }
+.spcard__taker { position: absolute; right: .12rem; top: .12rem; display: flex; align-items: center; gap: .06rem; padding: .03rem .1rem .03rem .03rem;
+  background: rgba(8, 11, 10, .92); border: 1px solid var(--mint-500); border-radius: .3rem; font-size: .13rem; color: var(--mint-400); font-weight: 700; }
+.spcard__taker .pavatar { --pa: .4rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--mint-400); }
+.spcard.is-taken .spcard__taker { filter: none; }
+.spcard__spin { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .4); }
+
+/* Grid image boxes: definite 100% tracks so `height: 100%` images resolve against the box (an auto track would
+   let non-square art overflow its frame). */
+.uthumb__art, .bandicon, .dhead__icon, .spcard__icon, .effect, .pavatar__img, .brief-faction__icon, .scard__itemart, .bglyph {
+  grid-template-rows: 100%;
+  grid-template-columns: 100%;
+}
+.spcard__icon img, .dhead__icon img, .scard__itemart img, .effect img { max-width: 100%; max-height: 100%; }
+
+/* ---- direction wheel (ui/facingWheel.js, research 09 §1.2): white diamond, 4 chevrons, "✕ 点击取消", orange range ---- */
+.fwheel { position: fixed; inset: 0; z-index: 6; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
+.fwheel__stripes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
+.fwheel__dia { position: absolute; transform: translate(-50%, -50%); pointer-events: none; animation: fwheel-in 160ms var(--ease-out); }
+@keyframes fwheel-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.82); } }
+.fwheel__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 .05rem rgba(0, 0, 0, .75)); }
+.fwheel__outer { fill: rgba(8, 12, 10, .1); stroke: #fff; stroke-width: 2.4px; vector-effect: non-scaling-stroke; }
+.fwheel__quad { fill: transparent; transition: fill var(--t-fast); }
+/* only the chevron lights (research 09 §1.2): a tinted quadrant would wash out the units standing under the diamond */
+.fwheel__quad.is-on { fill: transparent; }
+.fwheel__inner { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .9); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
+.fwheel.is-pressed .fwheel__inner { fill: rgba(255, 255, 255, .1); }
+.fwheel__chev path { fill: rgba(255, 255, 255, .92); transform-box: fill-box; transform-origin: center; transition: transform var(--t-fast), fill var(--t-fast); }
+.fwheel__chev.is-on path { fill: #ffae3d; transform: scale(1.4); filter: drop-shadow(0 0 3px rgba(255, 156, 51, .9)); }
+.fwheel__cancel {
+  position: absolute; left: 25%; top: 25%; transform: translate(-92%, -118%); pointer-events: auto;
+  display: inline-flex; align-items: center; gap: .05rem; padding: .03rem .1rem .03rem .05rem; white-space: nowrap;
+  background: var(--red); border: 0; color: #fff; font-size: .15rem; font-weight: 700; letter-spacing: .06em; cursor: pointer;
+  clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - .08rem) 100%, 0 100%); box-shadow: 0 .03rem .1rem rgba(0, 0, 0, .5);
+}
+.fwheel__cancel:hover { background: #ff4a2b; }
+.fwheel__x { width: .18rem; height: .18rem; filter: brightness(0) invert(1); }
+.fwheel__x--txt { display: grid; place-items: center; filter: none; font-size: .14rem; }
+.fwheel__tip {
+  position: absolute; left: 50%; top: 100%; transform: translate(-50%, .08rem); white-space: nowrap; pointer-events: none;
+  padding: .04rem .16rem; background: rgba(8, 11, 10, .9); border: 1px solid rgba(255, 156, 51, .6); color: #ffc27a; font-size: .15rem; letter-spacing: .08em;
+}
+.fwheel__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+/* ---- underframe: the selection diamond of a tapped own piece (ui/underframe.js): 撤退 / 出售 +N / 销毁 ----
+   It sits above every HUD panel (detail card z 9, bond popup, drawer, shop bar): only its buttons take pointer events,
+   so they are never covered (user playtest #2 item 8); overlays that must win (机变, modals, the drag ghost) are higher. */
+.gm__hud > .uframe { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 12; }
+.uframe__dia { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: uframe-in 180ms var(--ease-out); }
+@keyframes uframe-in { from { opacity: 0; transform: scale(.85); } }
+.uframe__outer { fill: rgba(78, 216, 175, .05); stroke: rgba(255, 255, 255, .88); stroke-width: 1.6px; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; }
+.uframe__corner { fill: none; stroke: var(--mint-400); stroke-width: 2.4px; vector-effect: non-scaling-stroke; }
+.uframe__btn {
+  position: absolute; pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: .02rem;
+  padding: 0; background: none; border: 0; color: #fff; cursor: pointer; filter: drop-shadow(0 .03rem .06rem rgba(0, 0, 0, .8));
+  animation: uframe-in 200ms var(--ease-out);
+}
+.uframe__btn:disabled { opacity: .5; cursor: wait; }
+.uframe__btn--retreat { left: 25%; top: 25%; transform: translate(-80%, -90%); }
+.uframe__btn--sell, .uframe__btn--destroy { left: 75%; top: 25%; transform: translate(-20%, -90%); }
+/* the octagon plate every button stands on (the official util_btn plates are octagons) */
+.uframe__glyph, .uframe__plate {
+  width: .56rem; height: .56rem; padding: .08rem; box-sizing: border-box;
+  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
+}
+.uframe__glyph { background: var(--red); fill: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); }
+/* coloured plates: tone colour through the official sprite's shape (mask), dark backing through its glyph cut-out */
+.uframe__plate { --uf-tone: linear-gradient(180deg, #ffd06a 0%, #f6a329 55%, #d9820c 100%); --uf-ink: #1d1400;
+  position: relative; display: grid; place-items: center; padding: 0; background: var(--uf-ink); }
+.uframe__plate--destroy { --uf-tone: linear-gradient(180deg, #ff6a4f 0%, #e73118 60%, #b8200d 100%); --uf-ink: #230703; }
+.uframe__plate.has-mask::after {
+  content: ''; position: absolute; inset: 0; background: var(--uf-tone);
+  -webkit-mask: var(--uf-mask) center / 100% 100% no-repeat; mask: var(--uf-mask) center / 100% 100% no-repeat;
+}
+.uframe__plate.is-glyph { background: var(--uf-tone); }
+.uframe__pglyph { width: 64%; height: 64%; color: var(--uf-ink); }
+.uframe__btn:hover:not(:disabled) .uframe__glyph { background: #ff4a2b; }
+.uframe__btn:hover:not(:disabled) .uframe__plate { filter: brightness(1.12) drop-shadow(0 0 .08rem rgba(255, 198, 90, .7)); }
+.uframe__btn--destroy:hover:not(:disabled) .uframe__plate { filter: brightness(1.12) drop-shadow(0 0 .08rem rgba(255, 90, 60, .7)); }
+.uframe__label { font-size: .14rem; font-weight: 700; letter-spacing: .12em; padding: 0 .06rem; background: rgba(8, 11, 10, .82); text-shadow: 0 1px 2px #000; }
+.uframe__btn--sell .uframe__label { color: #ffd98a; }
+.uframe__price { position: absolute; right: -.12rem; top: -.06rem; --hex-h: .24rem; }
+
+/* ---- equip-replace dialog (js/ui/equipReplace.js; official equip_replace_* sprites via --eqr-* when installed) ---- */
+.eqr-host { display: contents; }
+.modal__box.eqr {
+  --bk-c: var(--red-premium);
+  background: rgba(14, 14, 18, .98);
+  background: var(--eqr-bg, none) center / cover no-repeat, repeating-linear-gradient(0deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 3px), linear-gradient(180deg, #17171c, #0d0d11);
+  border-color: rgba(255, 84, 84, .35);
+}
+.eqr .modal__body { display: flex; flex-direction: column; align-items: stretch; gap: .1rem; padding-bottom: .16rem; }
+.eqr__lead { font-size: .17rem; line-height: 1.6; color: var(--text-md); }
+.eqr__lead b { color: var(--text-hi); }
+.eqr__lead .t-red { color: var(--red-premium); }
+.eqr__top { display: flex; align-items: center; justify-content: center; gap: .22rem; margin-top: .06rem; }
+.eqr__op { display: flex; flex-direction: column; align-items: center; gap: .05rem; flex: none; width: 1.1rem; }
+.eqr__ava {
+  position: relative; display: grid; place-items: center; width: .96rem; height: .96rem;
+  background: var(--eqr-ava, linear-gradient(160deg, #26262c, #111114)) center / 100% 100% no-repeat;
+}
+.eqr__ava::after { content: ''; position: absolute; inset: .1rem; background: var(--eqr-avaf, none) center / 100% 100% no-repeat; pointer-events: none; }
+.eqr__ava .uthumb { --ut: .72rem; }
+.eqr__opname { font-size: .15rem; font-weight: 700; color: var(--text-hi); max-width: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.eqr__swap { display: grid; place-items: center; width: .4rem; height: .32rem; color: var(--mint-400); flex: none; }
+.eqr__swap img, .eqr__swap .icon { width: 100%; height: 100%; object-fit: contain; }
+.eqr__incoming { display: flex; flex-direction: column; gap: .04rem; min-width: 0; flex: 0 1 4.2rem; }
+.eqr__card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .12rem; row-gap: .04rem; align-items: center; text-align: left; }
+.eqr__card--new {
+  padding: .1rem .14rem; border: 1px solid rgba(89, 244, 202, .45);
+  background: linear-gradient(90deg, rgba(78, 216, 175, .14), rgba(78, 216, 175, .03));
+}
+.eqr__icon { grid-row: 1; grid-column: 1; position: relative; display: grid; place-items: center; }
+.eqr__card--new .eqr__icon { width: .74rem; height: .74rem; background: var(--eqr-round, none) center / 100% 100% no-repeat; }
+.eqr__card--new .eqr__icon .uthumb { --ut: .56rem; }
+.eqr__meta { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; gap: .03rem; min-width: 0; }
+.eqr__chips { display: flex; align-items: center; gap: .06rem; min-height: .2rem; }
+.eqr__elite { font-size: .12rem; padding: 0 .06rem; background: var(--gold); color: #1b1300; font-weight: 700; }
+.eqr__name { font-size: .19rem; color: var(--text-hi); line-height: 1.2; }
+.eqr__desc { grid-row: 2; grid-column: 1 / -1; margin: 0; font-size: .145rem; line-height: 1.55; color: var(--text-md); max-height: 1.12rem; overflow: auto; }
+.eqr__arrow { position: relative; height: .5rem; margin: 0 auto; width: 50%; }
+.eqr__aline { position: absolute; left: 0; right: 0; top: .2rem; height: .2rem; border: .045rem solid rgba(242, 242, 242, .82); border-bottom: 0; }
+.eqr__aline::before { content: ''; position: absolute; left: 50%; top: -.25rem; width: .045rem; height: .21rem; margin-left: -.0225rem; background: rgba(242, 242, 242, .82); }
+.eqr__ahead { position: absolute; top: .34rem; width: .3rem; height: .2rem; margin-left: -.15rem; background: var(--eqr-ahead, none) center / 100% 100% no-repeat; }
+.eqr__ahead--l { left: calc(0% + .0225rem); } .eqr__ahead--r { left: calc(100% - .0225rem); }
+.eqr-host:not([style*="--eqr-ahead"]) .eqr__ahead { width: .16rem; height: .16rem; margin-left: -.08rem; top: .3rem; border-right: .045rem solid rgba(242, 242, 242, .82); border-bottom: .045rem solid rgba(242, 242, 242, .82); transform: rotate(45deg); background: none; }
+.eqr__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
+.eqr__opt {
+  position: relative; display: flex; flex-direction: column; align-items: center; gap: .08rem; min-height: 2.5rem; padding: .18rem .16rem .5rem;
+  text-align: center; color: inherit; cursor: pointer; overflow: hidden;
+  background: var(--eqr-opt, none) center / 100% 100% no-repeat, linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
+  border: 2px solid rgba(255, 255, 255, .16);
+  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
+}
+.eqr__opt .eqr__icon { width: .86rem; height: .86rem; }
+.eqr__opt .eqr__icon .uthumb { --ut: .8rem; }
+.eqr__opt .eqr__meta { align-items: center; }
+.eqr__opt .eqr__desc { text-align: left; max-height: 1rem; }
+.eqr__opt:hover { border-color: rgba(255, 255, 255, .42); }
+.eqr__opt:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 2px; }
+.eqr__opt.is-sel { border-color: #e2262a; box-shadow: 0 0 .2rem rgba(226, 38, 42, .45); }
+.eqr__opt.is-sel::after {
+  content: ''; position: absolute; inset: 0; pointer-events: none;
+  background: var(--eqr-sel, linear-gradient(225deg, rgba(226, 38, 42, .55), transparent 38%)) center / 100% 100% no-repeat;
+}
+.eqr__flag {
+  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: .44rem; display: flex; align-items: center; justify-content: center; gap: .08rem;
+  font-size: .17rem; font-weight: 700; letter-spacing: .12em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
+  background: var(--eqr-selbar, linear-gradient(90deg, #a3141a, #d42a2a)) center / 100% 100% no-repeat;
+  opacity: 0; transform: translateY(100%); transition: opacity var(--t-fast), transform var(--t-med) var(--ease-out);
+}
+.eqr__flag-icon { width: .2rem; height: .2rem; }
+.eqr__opt.is-sel .eqr__flag { opacity: 1; transform: none; }
+.eqr__hint { margin: .04rem 0 0; text-align: center; font-size: .15rem; color: var(--text-lo); min-height: .24rem; }
+.eqr__hint b { color: var(--text-hi); }
+.eqr__ok-icon { width: .2rem; height: .2rem; margin-right: .06rem; vertical-align: -.03rem; filter: brightness(0) invert(1); }

public/css/screens/game-shop.css

@@ -0,0 +1,224 @@
+/* ==========================================================================================
+   screens/game-shop.css — bottom shop bar (js/ui/shopBar.js) + merge reward overlay (rewardOverlay.js).
+   Research 06 §11.2: LEVEL card, operator cards (tier chip, price hexagon, half-body art, bond & class
+   rows, icy frozen overlay), item card, funds card with ✕ 收起; 冻结 (ice) / 刷新 (amber) above.
+   ========================================================================================== */
+
+.shopbar {
+  position: absolute; right: .26rem; bottom: .2rem;
+  display: flex; flex-direction: column; align-items: flex-end; gap: .1rem;
+  animation: shop-up var(--t-slow) var(--ease-out);
+}
+@keyframes shop-up { from { opacity: 0; transform: translateY(.3rem); } }
+/* Official layout (research 06 §11.2 / D3): "剩余可放置角色: N" on its own line, right-aligned ABOVE [冻结] [刷新]. On one
+   line the block reached over the bench's last pads (整备区 slot 9 at 16:9 under the official shop camera). Only the
+   bar's parts take the pointer: its box spans the empty space left of the tools, which used to swallow drags and taps
+   on bench slots 5–9. */
+.gm__hud > .shopbar { pointer-events: none; }
+.shopbar__row, .shopbar__tools > button { pointer-events: auto; }
+.shopbar__tools { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: center; gap: .06rem .12rem; }
+.shopbar__remain {
+  grid-column: 1 / -1; justify-self: end; pointer-events: none;
+  font-size: .16rem; color: var(--text-md); padding: .04rem .14rem; background: rgba(8, 11, 10, .78);
+  border-left: 3px solid var(--mint-500);
+}
+.shopbar__remain b { color: var(--mint-400); font-size: .2rem; margin-left: .04rem; }
+.toolbtn {
+  --tb: var(--ice);
+  display: flex; align-items: center; gap: .08rem; height: .48rem; padding: 0 .14rem 0 .08rem;
+  background: rgba(8, 11, 10, .9); border: 2px solid var(--tb); color: var(--tb); font-size: .19rem; font-weight: 700; letter-spacing: .1em;
+  box-shadow: 0 .04rem .14rem rgba(0, 0, 0, .45);
+  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
+}
+.toolbtn:hover:not(:disabled) { background: rgba(8, 11, 10, .9); background: color-mix(in srgb, var(--tb) 16%, rgba(8, 11, 10, .9)); box-shadow: 0 0 .18rem transparent; box-shadow: 0 0 .18rem color-mix(in srgb, var(--tb) 40%, transparent); }
+.toolbtn:active:not(:disabled) { transform: translateY(1px); }
+.toolbtn:disabled { --tb: var(--line-3); color: var(--text-dim); cursor: not-allowed; }
+.toolbtn__img { width: .34rem; height: .34rem; object-fit: contain; }
+.toolbtn .icon { width: .24rem; height: .24rem; }
+.toolbtn--amber { --tb: var(--amber); }
+.toolbtn--ice.is-on { background: var(--ice); color: #0b1822; }
+.toolbtn--ice.is-on kbd { color: #28435a; border-color: #5d88aa; }
+.toolbtn--ice.is-on:hover:not(:disabled) { background: #c2e5ff; color: #0b1822; box-shadow: 0 0 .22rem rgba(159, 212, 255, .6); }
+.toolbtn--ice.is-on kbd { background: rgba(255, 255, 255, .35) !important; }
+.toolbtn__free { font-size: .13rem; padding: .01rem .06rem; background: var(--mint-500); color: var(--text-on-mint); letter-spacing: 0; }
+.toolbtn .hex { --hex-h: .26rem; }
+
+.shopbar__row {
+  position: relative; display: flex; align-items: stretch; gap: .08rem; padding: .1rem;
+  background: linear-gradient(180deg, rgba(14, 19, 17, .94), rgba(8, 11, 10, .97));
+  border: 1px solid var(--line-2); border-top: 2px solid var(--mint-700);
+  box-shadow: 0 -.04rem .3rem rgba(0, 0, 0, .55);
+}
+.shopbar__row::before {
+  content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
+  background: linear-gradient(90deg, var(--mint-400), transparent 30%, transparent 70%, var(--mint-400));
+}
+.shopbar__cards { display: flex; gap: .08rem; }
+.shopbar__item { display: flex; gap: .08rem; padding-left: .08rem; border-left: 1px dashed var(--line-2); }
+.shopbar.is-frozen .shopbar__row { border-color: rgba(159, 212, 255, .5); border-top-color: var(--ice); }
+.shopbar.is-locked .scard:not(.scard--sold) { filter: saturate(.55) brightness(.8); }
+
+/* ---- level card ---- */
+.lvcard {
+  position: relative; width: 1.24rem; height: 2.24rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem;
+  padding: .2rem .1rem .1rem; background: linear-gradient(180deg, #5fe0b9, #36b690); border: 0; color: var(--text-on-mint);
+  clip-path: polygon(0 0, 100% 0, 100% calc(100% - .14rem), calc(100% - .14rem) 100%, 0 100%);
+  transition: filter var(--t-fast), transform var(--t-fast);
+}
+.lvcard:hover:not(.is-disabled) { filter: brightness(1.08); }
+.lvcard:active:not(.is-disabled) { transform: translateY(1px); }
+.lvcard__price { position: absolute; top: .08rem; left: 50%; transform: translateX(-50%); }
+.lvcard__frame { position: relative; display: flex; flex-direction: column; align-items: center; padding: .04rem .16rem .02rem; border: 2px solid rgba(6, 17, 13, .75); }
+.lvcard__frame::before, .lvcard__frame::after { content: ''; position: absolute; width: .1rem; height: .1rem; border: 2px solid var(--text-on-mint); }
+.lvcard__frame::before { left: -.06rem; top: -.06rem; border-right: 0; border-bottom: 0; }
+.lvcard__frame::after { right: -.06rem; bottom: -.06rem; border-left: 0; border-top: 0; }
+.lvcard__micro { font-family: var(--font-display); font-size: .12rem; letter-spacing: .24em; font-weight: 700; }
+.lvcard__num { font-size: .66rem; line-height: .9; font-weight: 700; }
+.lvcard__label { font-size: .2rem; font-weight: 900; letter-spacing: .3em; padding-left: .3em; }
+.lvcard__key { position: absolute; right: .08rem; bottom: .06rem; color: var(--mint-900) !important; border-color: rgba(6, 17, 13, .35) !important; background: transparent !important; }
+.lvcard.is-disabled { background: linear-gradient(180deg, #3a4a44, #2a3531); color: #8fa59c; cursor: not-allowed; }
+.lvcard.is-disabled .lvcard__frame { border-color: rgba(143, 165, 156, .5); }
+.lvcard.is-disabled .lvcard__frame::before, .lvcard.is-disabled .lvcard__frame::after { border-color: #8fa59c; }
+.lvcard.is-max { background: linear-gradient(180deg, #d9b24a, #a07a1c); color: #1d1400; cursor: default; filter: none; }
+
+/* ---- operator / item card ---- */
+.scard-wrap { display: flex; }
+.scard {
+  --tc: var(--tier-1);
+  position: relative; width: 1.56rem; height: 2.24rem; padding: 0; overflow: hidden; text-align: left;
+  display: flex; flex-direction: column; justify-content: flex-end;
+  background: #151a18; border: 1px solid rgba(78, 216, 175, .35);
+  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), box-shadow var(--t-fast);
+}
+.scard--t1 { --tc: var(--tier-1); } .scard--t2 { --tc: var(--tier-2); } .scard--t3 { --tc: var(--tier-3); }
+.scard--t4 { --tc: var(--tier-4); } .scard--t5 { --tc: var(--tier-5); } .scard--t6 { --tc: var(--tier-6); }
+.scard__bg { position: absolute; inset: 0;
+  background: linear-gradient(180deg, #1c2320, #0f1311); /* fallback: no color-mix() (Safari < 16.2) */
+  background:
+  radial-gradient(120% 70% at 80% 30%, color-mix(in srgb, var(--tc) 28%, transparent), transparent 70%),
+  linear-gradient(180deg, #1c2320, #0f1311); }
+.scard__water { position: absolute; left: -.2rem; top: .34rem; width: 1.1rem; height: 1.1rem; opacity: .1; }
+.scard__water .bglyph { width: 100%; height: 100%; }
+.scard__art { position: absolute; right: -.14rem; top: 0; height: 100%; width: auto; max-width: none; object-fit: cover; pointer-events: none;
+  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 88%); mask-image: linear-gradient(180deg, #000 55%, transparent 88%); }
+.scard__top { position: absolute; left: .06rem; right: .06rem; top: .06rem; display: flex; align-items: flex-start; justify-content: space-between; z-index: 2; }
+.scard__price { position: absolute; left: 50%; top: 0; transform: translateX(-50%); filter: drop-shadow(0 1px 3px #000); }
+.scard__free { position: absolute; left: 50%; top: .02rem; transform: translateX(-50%); font-family: var(--font-num); font-weight: 700; font-size: .16rem; letter-spacing: .1em; color: var(--text-on-mint); background: var(--mint-400); padding: 0 .1rem; clip-path: polygon(.08rem 0, calc(100% - .08rem) 0, 100% 50%, calc(100% - .08rem) 100%, .08rem 100%, 0 50%); }
+.scard__pips { display: flex; gap: .03rem; padding: .03rem .04rem; background: rgba(0, 0, 0, .6); }
+.scard__pips i { width: .07rem; height: .07rem; border: 1px solid var(--gold); transform: rotate(45deg); }
+.scard__pips i.on { background: var(--gold); }
+.scard__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .03rem; padding: .3rem .08rem .08rem; background: linear-gradient(0deg, rgba(8, 11, 10, .98) 60%, transparent); }
+/* the loadout's skill (DESIGN §16) above the name; mint frame = not the default skill */
+.scard__skill { position: absolute; right: .07rem; top: -.02rem; width: .3rem; height: .3rem; display: grid; place-items: center;
+  background: #0a0d0c; border: 1px solid var(--line-3); box-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
+.scard__skill img { width: 100%; height: 100%; object-fit: cover; }
+.scard__skill .icon { width: .18rem; height: .18rem; color: var(--gold); }
+/* a chosen skill without an icon in the asset manifest: its slot letter */
+.scard__sglyph { font-family: var(--font-display); font-size: .13rem; font-weight: 700; letter-spacing: .02em; color: var(--mint-400); }
+.scard__skill.is-custom { border-color: var(--mint-400); box-shadow: 0 0 0 1px var(--mint-500), 0 0 .08rem rgba(23, 249, 183, .5); }
+.scard__skill.is-custom::after { content: ''; position: absolute; right: -.04rem; top: -.04rem; width: .08rem; height: .08rem; background: var(--mint-400); transform: rotate(45deg); }
+.scard__mod { position: absolute; right: 100%; bottom: 0; margin-right: .03rem; display: flex; align-items: center; gap: .02rem; font-family: var(--font-display); font-size: .1rem; line-height: 1.4; padding: 0 .04rem; background: rgba(0, 0, 0, .75); color: var(--gold-2); white-space: nowrap; }
+/* the official module type icon (local-client art, DESIGN §13); the type text stays beside it */
+.scard__skill .scard__modicon { flex: none; width: .14rem; height: .14rem; object-fit: contain; }
+.scard__name { font-size: .19rem; font-weight: 900; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 3px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.scard__bonds { display: flex; flex-wrap: wrap; gap: .02rem .08rem; }
+.scard__bond { display: inline-flex; align-items: center; gap: .03rem; font-size: .13rem; color: var(--mint-400); }
+.scard__bond .bglyph { width: .18rem; height: .18rem; }
+.scard__class { display: flex; align-items: center; gap: .05rem; font-size: .13rem; color: var(--text-lo); }
+.scard__prof { width: .18rem; height: .18rem; object-fit: contain; opacity: .85; }
+.scard__detail { position: absolute; right: .04rem; bottom: .04rem; z-index: 3; width: .24rem; height: .24rem; display: grid; place-items: center; color: var(--text-dim); opacity: 0; transition: opacity var(--t-fast), color var(--t-fast); cursor: help; }
+.scard__detail .icon { width: .18rem; height: .18rem; }
+.scard:hover .scard__detail { opacity: 1; }
+.scard__detail:hover { color: var(--mint-400); }
+.scard__mergetag { position: absolute; z-index: 3; right: 0; top: .38rem; font-size: .12rem; font-weight: 700; padding: .01rem .06rem; background: var(--gold); color: #1d1400; letter-spacing: .08em; }
+.scard:not(.is-disabled):not(.scard--sold):hover { transform: translateY(-.08rem); border-color: var(--mint-400); box-shadow: 0 0 0 1px var(--mint-400), 0 .1rem .24rem rgba(23, 249, 183, .22); }
+.scard:not(.is-disabled):not(.scard--sold):active { transform: translateY(-.04rem); }
+.scard.is-disabled { cursor: not-allowed; }
+.scard.is-disabled .scard__art, .scard.is-disabled .scard__itemart { filter: grayscale(.7) brightness(.6); }
+.scard.is-merge { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255, 198, 0, .6), 0 0 .2rem rgba(255, 198, 0, .3); }
+.scard.is-frozen::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
+  background: linear-gradient(180deg, rgba(159, 212, 255, .28), rgba(159, 212, 255, .12) 50%, rgba(159, 212, 255, .34));
+  box-shadow: inset 0 0 0 2px rgba(159, 212, 255, .8), inset 0 0 .3rem rgba(159, 212, 255, .5); }
+.scard__ice { position: absolute; left: 50%; bottom: .06rem; transform: translateX(-50%); z-index: 4; width: .3rem; height: .3rem; display: grid; place-items: center; background: #0c1a26; border: 1px solid var(--ice); color: var(--ice); }
+.scard__ice .icon { width: .2rem; height: .2rem; }
+.scard--item { --tc: var(--gold-2); }
+.scard__itemart { position: absolute; left: 50%; top: .38rem; transform: translateX(-50%); width: 1rem; height: 1rem; display: grid; place-items: center;
+  background: radial-gradient(circle, rgba(255, 198, 0, .16), transparent 70%); }
+.scard__itemart img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .04rem .08rem #000); }
+.scard__itemart .icon { width: .6rem; height: .6rem; color: var(--gold-2); }
+.scard__idesc { font-size: .12rem; line-height: 1.45; color: var(--text-lo); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.scard--sold { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .02) 0 .08rem, transparent .08rem .16rem), rgba(8, 11, 10, .75); border: 1px dashed var(--line-2); justify-content: center; align-items: center; }
+.scard__soldtxt { display: flex; flex-direction: column; align-items: center; gap: .02rem; font-size: .16rem; color: var(--text-dim); }
+
+/* ---- funds card ---- */
+.funds { width: 1.18rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .08rem; padding: .06rem; border-left: 1px solid var(--line); }
+.funds__hex {
+  position: relative; width: 1rem; height: .9rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  background: linear-gradient(180deg, #2b2410, #16120a); color: var(--gold);
+  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
+}
+.funds__hex::before { content: ''; position: absolute; inset: 2px; clip-path: inherit; border: 0; background: transparent; box-shadow: inset 0 0 0 2px var(--gold); }
+.funds__coin { width: .34rem; height: .34rem; fill: var(--gold); filter: drop-shadow(0 0 .06rem rgba(255, 198, 0, .6)); }
+.funds__num { font-size: .36rem; line-height: 1; font-weight: 700; color: #fff; }
+.funds__label { font-size: .14rem; color: var(--text-lo); letter-spacing: .1em; }
+.funds__collapse { display: flex; align-items: center; gap: .04rem; font-size: .15rem; background: none; border: 1px solid var(--line-2); color: var(--text-lo); padding: .02rem .1rem; }
+.funds__collapse .icon { width: .14rem; height: .14rem; }
+.funds__collapse:hover { color: var(--text-hi); border-color: var(--line-3); }
+.coin-glyph { fill: var(--gold); }
+
+/* collapsed tab */
+.shopbar-tab { position: absolute; right: .26rem; bottom: .2rem; display: flex; align-items: center; gap: .1rem; padding: .08rem; background: rgba(8, 11, 10, .92); border: 1px solid var(--line-2); border-top: 2px solid var(--mint-700); }
+.shopbar-tab__funds { display: flex; align-items: center; gap: .06rem; padding: 0 .1rem; }
+.shopbar-tab__funds .coin-glyph { width: .26rem; height: .26rem; }
+.shopbar-tab__funds b { font-size: .28rem; }
+.shopbar-tab__btn { display: flex; align-items: center; gap: .04rem; height: .44rem; padding: 0 .16rem; background: var(--mint-500); color: var(--text-on-mint); border: 0; font-size: .17rem; font-weight: 700; letter-spacing: .1em; }
+.shopbar-tab__btn .icon { width: .18rem; height: .18rem; transform: rotate(90deg); }
+
+/* (no drag-to-sell zone: selling is the underframe's 出售 +N button — research 09 §5) */
+
+/* ---- merge reward (inline: replaces the operator cards) ---- */
+.shopbar__reward { display: flex; gap: .08rem; padding: 0 .08rem 0 0; position: relative; animation: pop-in var(--t-slow) var(--ease-out); }
+.shopbar__reward::before { content: ''; position: absolute; inset: -.06rem -.04rem; border: 1px solid rgba(255, 198, 0, .55);
+  box-shadow: 0 0 .24rem rgba(255, 198, 0, .18), inset 0 0 .3rem rgba(255, 198, 0, .08); pointer-events: none; }
+.rwtag {
+  width: .92rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .06rem; padding: .08rem .04rem;
+  background: linear-gradient(180deg, rgba(255, 198, 0, .22), rgba(255, 198, 0, .06)); color: var(--gold); text-align: center;
+}
+.rwtag__icon { width: .34rem; height: .34rem; filter: drop-shadow(0 0 .08rem rgba(255, 198, 0, .6)); }
+.rwtag__title { writing-mode: vertical-rl; font-size: .22rem; font-weight: 900; letter-spacing: .2em; line-height: 1; }
+.rwtag__micro { font-family: var(--font-display); font-size: .09rem; letter-spacing: .14em; opacity: .75; }
+.rwtag__sub { font-size: .12rem; color: var(--text-md); line-height: 1.3; }
+.rwtag__later { display: flex; align-items: center; gap: .02rem; margin-top: .04rem; padding: .02rem .08rem; font-size: .13rem; color: var(--text-lo);
+  background: rgba(0, 0, 0, .35); border: 1px solid var(--line-2); }
+.rwtag__later .icon { width: .12rem; height: .12rem; }
+.rwtag__later:hover { color: var(--text-hi); border-color: var(--line-3); }
+.shopbar__rwcards { display: flex; gap: .08rem; }
+.shopbar__rwcards .scard { border-color: rgba(255, 198, 0, .5); }
+.shopbar.has-reward .shopbar__row { border-top-color: var(--gold); }
+.rewardpill {
+  position: absolute; right: .26rem; bottom: 3.26rem; z-index: 6; display: flex; align-items: center; gap: .08rem; padding: .08rem .16rem;
+  background: rgba(24, 18, 4, .95); border: 1px solid var(--gold); color: var(--gold); font-size: .17rem; font-weight: 700;
+  animation: pulse-gold 1.6s ease-in-out infinite;
+}
+.rewardpill .icon { width: .2rem; height: .2rem; }
+@keyframes pulse-gold { 50% { box-shadow: 0 0 .24rem rgba(255, 198, 0, .5); } }
+
+/* ---- two-tap buy / upgrade (research 09 §5): the first tap lifts + enlarges the card and shows 确认购买 ---- */
+.scard.is-armed {
+  z-index: 3; transform: translateY(-.16rem) scale(1.08) !important; border-color: var(--gold);
+  box-shadow: 0 0 0 2px var(--gold), 0 .14rem .32rem rgba(0, 0, 0, .65), 0 0 .3rem rgba(255, 198, 0, .35) !important;
+}
+.scard.is-armed.is-disabled { border-color: var(--red-premium); box-shadow: 0 0 0 2px var(--red-premium), 0 .14rem .32rem rgba(0, 0, 0, .65) !important; }
+.scard__confirm {
+  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 0;
+  padding: .05rem 0 .04rem; background: linear-gradient(0deg, var(--gold), #e0a800); color: #1d1400; pointer-events: none;
+  animation: confirm-in var(--t-fast) var(--ease-out);
+}
+@keyframes confirm-in { from { transform: translateY(100%); } }
+.scard__confirm b { font-size: .18rem; font-weight: 900; letter-spacing: .22em; padding-left: .22em; }
+.scard__confirm small { font-size: .11rem; letter-spacing: .1em; opacity: .75; }
+.scard__confirm.is-no { background: linear-gradient(0deg, #54150f, #34100c); color: var(--red-premium); }
+.scard__confirm.is-no small { opacity: 1; color: #ffb0a6; max-width: 100%; padding: 0 .06rem; text-align: center; white-space: normal; }
+.shopbar.has-armed .scard:not(.is-armed):not(.scard--sold) { filter: brightness(.72); }
+.lvcard.is-armed { background: linear-gradient(180deg, #ffd65a, #e0a800); color: #1d1400; box-shadow: 0 0 0 2px #fff4c2, 0 0 .3rem rgba(255, 198, 0, .5); animation: pulse-gold 1.1s var(--ease-in-out) infinite; }
+.lvcard.is-armed .lvcard__label { letter-spacing: .12em; padding-left: .12em; }

public/css/screens/game.css

@@ -0,0 +1,560 @@
+/* ==========================================================================================
+   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; }
+.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; }
+
+/* ---- 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; }
+.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;
+}
+/* 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 { display: flex; align-items: flex-start; gap: .14rem; }
+
+/* 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; }
+.capsule--combat { --cap: var(--orange-hi); }
+.capsule--boss { --cap: var(--orange-hi); min-width: 4.2rem; }
+.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); }
+
+/* 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; }
+.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; }
+/* 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; }
+.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); }
+.bstrip__owner { align-self: center; writing-mode: vertical-rl; padding: .06rem .02rem; border: 1px solid rgba(246, 163, 41, .5); background: rgba(40, 26, 6, .7); }
+.bstrip__owner .micro { color: var(--amber); letter-spacing: .1em; font-size: .12rem; }
+.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.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); }
+
+/* ---- team panel ------------------------------------------------------------------------------------------- */
+.team { position: absolute; left: .22rem; top: 2.36rem; display: flex; flex-direction: column; gap: .14rem; pointer-events: none; }
+.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); }
+.team__status .icon { width: .18rem; height: .18rem; }
+.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; }
+.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; }
+.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; }
+.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); }
+
+.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: wait; }
+.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; }
+.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; }
+
+.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);
+}
+.chud__msg .icon { width: .22rem; height: .22rem; color: var(--gold); animation: hg-flip 2.4s var(--ease-in-out) infinite; }
+@keyframes hg-flip { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
+.chud__msg--dead { border-color: rgba(255, 84, 84, .5); color: var(--red-premium); }
+.chud__msg--dead .icon { color: var(--red-premium); animation: none; }
+.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); }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ---- settings modal ------------------------------------------------------------------------------------------------ */
+.set-list { display: flex; flex-direction: column; gap: .16rem; padding-top: .06rem; }
+.set-row { display: grid; grid-template-columns: 3.3rem 1fr auto; align-items: center; gap: .18rem; min-height: .44rem; }
+.set-row__label { display: flex; align-items: center; gap: .1rem; font-size: .18rem; color: var(--text-hi); white-space: nowrap; }
+.set-row__label .icon { width: .2rem; height: .2rem; color: var(--mint-500); }
+.set-row__label .micro { margin-left: .04rem; }
+.set-row__val { width: .5rem; text-align: right; font-size: .2rem; 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: .15rem; }
+.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; border: 1px solid var(--line-2); }
+.set-seg button { min-width: .8rem; height: .38rem; background: #0a0d0c; border: 0; border-right: 1px solid var(--line-2); color: var(--text-lo); font-size: .16rem; }
+.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: .14rem; 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); }
+
+/* ---- exit / away ------------------------------------------------------------------------------------------------------ */
+.exitm { display: flex; flex-direction: column; gap: .1rem; font-size: .17rem; 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: .34rem; 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; }
+@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: .16rem; letter-spacing: .5em; color: var(--mint-400); }
+.pauseov__plate h2 { font-size: .5rem; font-weight: 900; letter-spacing: .3em; color: #fff; text-shadow: 0 0 .2rem rgba(0, 0, 0, .8); }
+.pauseov__note { font-size: .17rem; color: var(--text-md); text-shadow: 0 1px 2px #000; }
+.pauseov__btns { display: flex; gap: .2rem; }

public/css/screens/guide.css

@@ -0,0 +1,110 @@
+/* ==========================================================================================
+   guide.css — 玩法说明 viewer (js/ui/guide.js): the 19 official tutorial pages at 16:9, chapter tabs,
+   ‹ › edge buttons, page dots. Sits above modals (it can be opened from the settings dialog).
+   ========================================================================================== */
+
+.guide {
+  position: fixed; inset: 0; z-index: calc(var(--z-modal) + 4);
+  display: grid; place-items: center;
+  background: radial-gradient(ellipse at 50% 40%, rgba(8, 14, 12, .82), rgba(2, 4, 3, .94));
+  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
+  animation: guide-fade 180ms var(--ease-out);
+}
+@keyframes guide-fade { from { opacity: 0; } }
+
+.guide__box {
+  --bk-c: var(--mint-500);
+  position: relative; display: flex; flex-direction: column; gap: .12rem;
+  padding: .16rem .22rem .16rem;
+  background: linear-gradient(180deg, rgba(22, 28, 26, .98), rgba(10, 13, 12, .98));
+  border: 1px solid var(--line-2);
+  box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .7), 0 0 0 1px rgba(78, 216, 175, .06) inset;
+  outline: none;
+  animation: guide-pop 220ms var(--ease-out);
+}
+@keyframes guide-pop { from { opacity: 0; transform: translateY(.12rem) scale(.985); } }
+
+/* header: title | chapter tabs | close */
+.guide__head { display: flex; align-items: center; gap: .3rem; min-height: .62rem; }
+.guide__titles { display: flex; flex-direction: column; gap: .02rem; min-width: 2.4rem; }
+.guide__title { margin: 0; font-size: .3rem; font-weight: 900; letter-spacing: .12em; color: var(--text-hi); line-height: 1.1; }
+.guide__chapters { display: flex; gap: .06rem; margin: 0 auto; }
+.guide__chapter {
+  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .01rem;
+  min-width: 1.5rem; height: .56rem; padding: 0 .22rem;
+  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); color: var(--text-lo);
+  clip-path: polygon(.12rem 0, 100% 0, calc(100% - .12rem) 100%, 0 100%);
+  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
+}
+.guide__chapter:hover { color: var(--text-hi); background: rgba(78, 216, 175, .06); }
+.guide__chapter.is-on { color: var(--text-on-mint); background: var(--mint-500); border-color: var(--mint-500); }
+.guide__chname { font-size: .19rem; font-weight: 700; letter-spacing: .1em; }
+.guide__chmicro { font-family: var(--font-display); font-size: .1rem; letter-spacing: .24em; opacity: .75; }
+.guide__close {
+  width: .56rem; height: .56rem; display: grid; place-items: center; flex: none;
+  background: rgba(0, 0, 0, .35); border: 1px solid var(--line-2); color: var(--text-md);
+  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
+}
+.guide__close .icon { width: .3rem; height: .3rem; }
+.guide__close:hover { color: var(--text-hi); border-color: var(--red-premium); background: var(--red-a20); }
+
+/* page stage (16:9) with edge buttons */
+.guide__stage { position: relative; }
+.guide__page {
+  position: relative; overflow: hidden;
+  width: min(calc(96vw - .5rem), calc((100vh - 2.3rem) * 16 / 9));
+  aspect-ratio: 16 / 9;
+  background: #050807 repeating-linear-gradient(135deg, rgba(78, 216, 175, .04) 0 .02rem, transparent .02rem .14rem);
+  border: 1px solid var(--line);
+}
+/* the pages are stored squashed to 1024²: stretch back to 16:9 */
+.guide__page img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; opacity: 0; transition: opacity 160ms ease; }
+.guide__page.is-loaded img { opacity: 1; }
+.guide__loading { position: absolute; inset: 0; display: grid; place-items: center; }
+.guide__missing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .1rem; color: var(--text-lo); font-size: .2rem; }
+.guide__missing .icon { width: .3rem; height: .3rem; }
+.guide__nav {
+  position: absolute; top: 0; bottom: 0; z-index: 2; width: 1rem; display: grid; place-items: center;
+  color: rgba(242, 242, 242, .7); background: transparent; border: 0;
+  transition: color var(--t-fast), background var(--t-fast);
+}
+.guide__nav .icon { width: .52rem; height: .52rem; filter: drop-shadow(0 0 .06rem rgba(0, 0, 0, .9)); }
+.guide__prev { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .38), transparent); }
+.guide__next { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .38), transparent); }
+.guide__nav:hover { color: var(--mint-400); }
+.guide__prev:hover { background: linear-gradient(90deg, rgba(0, 0, 0, .6), transparent); }
+.guide__next:hover { background: linear-gradient(270deg, rgba(0, 0, 0, .6), transparent); }
+
+/* footer: chapter + title | dots | count */
+.guide__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .3rem; min-height: .44rem; }
+.guide__label { display: flex; align-items: center; gap: .14rem; min-width: 0; }
+.guide__chtag {
+  flex: none; padding: .02rem .12rem; font-size: .14rem; font-weight: 700; letter-spacing: .1em;
+  color: var(--mint-400); border: 1px solid var(--mint-800); background: var(--mint-a10);
+}
+.guide__ptitle { font-size: .22rem; font-weight: 700; letter-spacing: .06em; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.guide__dots { display: flex; align-items: center; gap: .05rem; }
+.guide__dot {
+  width: .2rem; height: .08rem; padding: 0; border: 0; background: var(--line-2);
+  transition: background var(--t-fast), width var(--t-fast);
+}
+.guide__dot.is-first { margin-left: .14rem; }
+.guide__dot:hover { background: var(--line-3); }
+.guide__dot.is-on { width: .42rem; background: var(--mint-500); box-shadow: 0 0 .08rem rgba(23, 249, 183, .5); }
+.guide__count { justify-self: end; font-size: .24rem; color: var(--text-md); letter-spacing: .06em; }
+
+/* text fallback (no local tutorial art) */
+.guide__stage--text { width: min(92vw, 10rem); max-height: calc(100vh - 2rem); overflow: auto; padding: .1rem .06rem; }
+.guide__tips ol { margin: .14rem 0 0; padding-left: .34rem; display: flex; flex-direction: column; gap: .08rem; }
+.guide__tips li { font-size: .18rem; line-height: 1.6; color: var(--text-md); }
+.guide__tips li::marker { color: var(--mint-500); font-family: var(--font-num); }
+
+/* standard trigger */
+.guide-btn .btn__icon { color: var(--mint-500); }
+
+@media (max-height: 560px) {
+  .guide__box { padding: .08rem .12rem; gap: .06rem; }
+  .guide__head { min-height: .5rem; }
+  .guide__titles { display: none; }
+  .guide__page { width: min(calc(96vw - .3rem), calc((100vh - 1.5rem) * 16 / 9)); }
+}

public/css/screens/loadout.css

@@ -0,0 +1,362 @@
+/* ==========================================================================================
+   screens/loadout.css — 干员调配 (Operator loadout, DESIGN §16; js/screens/loadout.js): full-screen overlay with a
+   filterable roster of the visible chess (left) and the selected chess's skills and elite modules (right).
+   Official preset sprites (ui/outer: operator_preset, image_skill_select_outline, skill_select_deco, icon_equip_non)
+   are used when the local-client art is present; every piece has a CSS fallback.
+   Sizes are design px ÷ 100 (theme.css root scale); text that must stay readable on phones uses max(.xxrem, N px).
+   ========================================================================================== */
+
+.lo {
+  position: fixed; inset: 0; z-index: 55; /* above every screen (1) and the in-match banners (40), below the connection
+                                             banner (60), modals / confirm dialogs (80), toasts and tooltips */
+  display: flex; flex-direction: column;
+  padding: var(--sa-t, 0px) var(--sa-r, 0px) var(--sa-b, 0px) var(--sa-l, 0px);
+  background: var(--bg-0);
+  color: var(--text-hi);
+  animation: lo-in 200ms var(--ease-out) backwards;
+  overscroll-behavior: contain;
+}
+@keyframes lo-in { from { opacity: 0; } }
+.lo__bg {
+  position: absolute; inset: 0; pointer-events: none;
+  background:
+    radial-gradient(70% 90% at 18% 10%, rgba(78, 216, 175, .07), transparent 60%),
+    radial-gradient(60% 70% at 100% 100%, rgba(52, 184, 216, .06), transparent 60%),
+    linear-gradient(rgba(78, 216, 175, .035) 1px, transparent 1px) 0 0 / .6rem .6rem,
+    linear-gradient(90deg, rgba(78, 216, 175, .035) 1px, transparent 1px) 0 0 / .6rem .6rem,
+    linear-gradient(180deg, #0f1312, #090b0a);
+}
+.lo > * { position: relative; }
+
+/* ---- top bar ---------------------------------------------------------------------------------------------------- */
+.lo-top {
+  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .2rem;
+  height: max(1rem, 48px); padding: 0 .36rem;
+  background: linear-gradient(180deg, rgba(8, 10, 9, .95), rgba(10, 13, 12, .6));
+  border-bottom: 1px solid var(--line);
+}
+.lo-top::after {
+  content: ''; position: absolute; left: .36rem; right: .36rem; bottom: -1px; height: 1px;
+  background: linear-gradient(90deg, var(--mint-700), transparent 26%, transparent 74%, var(--mint-700));
+}
+.lo-top__left { justify-self: start; display: flex; align-items: center; gap: .14rem; }
+.lo-top__center { display: flex; flex-direction: column; align-items: center; gap: .02rem; }
+.lo-top__title { display: flex; align-items: center; gap: .12rem; margin: 0; font-size: max(.32rem, 16px); font-weight: 900; letter-spacing: .14em; line-height: 1.15; }
+.lo-top__icon { width: max(.3rem, 16px); height: max(.3rem, 16px); object-fit: contain; color: var(--mint-500); }
+.lo-top__right { justify-self: end; display: flex; align-items: center; gap: .16rem; min-width: 0; }
+.lo-count { font-size: max(.16rem, 11px); color: var(--text-lo); white-space: nowrap; }
+.lo-count b { color: var(--mint-400); font-size: max(.22rem, 13px); margin: 0 .02rem 0 .06rem; }
+/* co-op briefing: time left before the match locks the loadout (the overlay covers the briefing's own countdown) */
+.lo-deadline { --cd-h: max(.44rem, 20px); flex: none; }
+.lo-deadline .countdown__label { font-size: max(.11rem, 8px); }
+.lo-sync { font-size: max(.14rem, 10px); padding: .03rem .1rem; border: 1px solid var(--line-2); color: var(--text-lo); white-space: nowrap; letter-spacing: .04em; }
+.lo-sync.is-ok { color: var(--mint-400); border-color: var(--mint-800); }
+.lo-sync.is-busy { color: var(--text-md); }
+.lo-sync.is-warn { color: var(--amber); border-color: rgba(246, 163, 41, .45); }
+.lo-sync.is-bad { color: var(--red-premium); border-color: rgba(255, 84, 84, .45); }
+
+.lo-note {
+  flex: none; display: flex; align-items: center; gap: .08rem; margin: 0; padding: .07rem .36rem;
+  font-size: max(.15rem, 10px); color: var(--text-lo);
+  background: linear-gradient(90deg, rgba(78, 216, 175, .08), transparent 70%);
+  border-bottom: 1px solid rgba(47, 58, 53, .6);
+}
+.lo-note .icon { width: max(.16rem, 11px); height: max(.16rem, 11px); color: var(--mint-500); flex: none; }
+.lo-note.is-locked { color: var(--amber); background: linear-gradient(90deg, rgba(246, 163, 41, .12), transparent 70%); }
+.lo-note.is-locked .icon { color: var(--amber); }
+
+.lo-loading { flex: 1; display: flex; align-items: center; justify-content: center; gap: .14rem; color: var(--text-lo); font-size: max(.18rem, 12px); }
+
+/* ---- body layout -------------------------------------------------------------------------------------------------- */
+.lo-body {
+  flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7rem);
+  gap: .22rem; padding: .18rem .3rem .22rem;
+}
+.lo-roster { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .12rem; }
+.lo-detail-wrap { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
+.lo-detail-back { display: none; }
+
+/* ---- filters ----------------------------------------------------------------------------------------------------------- */
+.lo-filters { flex: none; display: flex; flex-direction: column; gap: .08rem; }
+.lo-frow { display: flex; align-items: center; gap: .12rem; flex-wrap: wrap; min-width: 0; }
+.lo-chips { display: flex; align-items: center; gap: .05rem; flex-wrap: wrap; }
+.lo-chip {
+  display: inline-flex; align-items: center; justify-content: center; gap: .05rem;
+  min-width: max(.46rem, 26px); height: max(.4rem, 24px); padding: 0 .12rem;
+  font: inherit; font-size: max(.15rem, 11px); font-weight: 700; color: var(--text-lo);
+  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); cursor: pointer;
+  clip-path: polygon(.07rem 0, 100% 0, calc(100% - .07rem) 100%, 0 100%);
+  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
+  touch-action: manipulation;
+}
+.lo-chip:hover { color: var(--text-hi); border-color: var(--line-3); }
+.lo-chip.is-on { color: var(--text-on-mint); background: var(--mint-500); border-color: var(--mint-400); }
+.lo-chip--tier .num { font-family: var(--font-num); font-size: max(.17rem, 12px); letter-spacing: .04em; }
+.lo-chip--t1 { --tc: var(--tier-1); } .lo-chip--t2 { --tc: var(--tier-2); } .lo-chip--t3 { --tc: var(--tier-3); }
+.lo-chip--t4 { --tc: var(--tier-4); } .lo-chip--t5 { --tc: var(--tier-5); } .lo-chip--t6 { --tc: var(--tier-6); }
+.lo-chip--tier { color: var(--tc); box-shadow: inset 0 -2px 0 var(--tc); }
+.lo-chip--tier.is-on { color: #0b0d0c; background: var(--tc); border-color: var(--tc); }
+.lo-chip__icon { width: max(.22rem, 14px); height: max(.22rem, 14px); object-fit: contain; }
+/* prof.large art is a black glyph on a white square: inverted + screen-blended it becomes a white glyph on any dark
+   surface; on the mint "on" chip it is multiplied instead (dark glyph, the square takes the chip colour) */
+.lo-profglyph { filter: invert(1); mix-blend-mode: screen; opacity: .85; }
+.lo-chip:hover .lo-profglyph { opacity: 1; }
+.lo-chip.is-on .lo-profglyph { filter: none; mix-blend-mode: multiply; opacity: 1; }
+.lo-chip__lbl { font-size: max(.14rem, 10px); }
+.lo-search { flex: 1 1 2.6rem; min-width: 2rem; max-width: 4.2rem; margin-left: auto; }
+
+.lo-select { display: inline-flex; align-items: center; gap: .06rem; height: max(.4rem, 24px); padding-left: .1rem; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); }
+.lo-select__k { font-size: max(.13rem, 10px); color: var(--text-dim); letter-spacing: .06em; }
+.lo-select select {
+  height: 100%; min-width: 1.6rem; padding: 0 .26rem 0 .06rem; border: 0; outline: none; cursor: pointer;
+  font: inherit; font-size: max(.15rem, 11px); color: var(--text-hi);
+  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%234ed8af' d='M7 9l5 6 5-6z'/></svg>") no-repeat right .04rem center / .2rem .2rem;
+  -webkit-appearance: none; appearance: none;
+}
+.lo-select select option { background: var(--bg-2); color: var(--text-hi); }
+.lo-select:focus-within { border-color: var(--mint-700); }
+
+.lo-toggle {
+  display: inline-flex; align-items: center; gap: .07rem; height: max(.4rem, 24px); padding: 0 .12rem;
+  font: inherit; font-size: max(.15rem, 11px); color: var(--text-lo); background: transparent; border: 1px solid transparent; cursor: pointer;
+  touch-action: manipulation;
+}
+.lo-toggle__box { display: grid; place-items: center; width: max(.2rem, 14px); height: max(.2rem, 14px); border: 1px solid var(--line-3); }
+.lo-toggle__box .icon { width: 86%; height: 86%; opacity: 0; color: var(--text-on-mint); }
+.lo-toggle.is-on { color: var(--mint-400); }
+.lo-toggle.is-on .lo-toggle__box { background: var(--mint-500); border-color: var(--mint-400); }
+.lo-toggle.is-on .lo-toggle__box .icon { opacity: 1; }
+
+/* ---- roster grid ------------------------------------------------------------------------------------------------------------ */
+.lo-grid {
+  flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(max(1.16rem, 64px), 1fr)); grid-auto-rows: max-content;
+  align-content: start; gap: .1rem; padding: .06rem .08rem .2rem .02rem;
+  scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
+}
+.lo-empty { grid-column: 1 / -1; padding: .4rem; text-align: center; font-size: max(.16rem, 11px); }
+
+.lo-card {
+  --tc: var(--tier-1);
+  position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0;
+  padding: 0; font: inherit; color: var(--text-hi); text-align: left; cursor: pointer;
+  background: linear-gradient(180deg, rgba(34, 41, 38, .95), rgba(14, 17, 16, .98));
+  border: 1px solid var(--line); box-shadow: inset 0 -2px 0 var(--tc);
+  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
+  touch-action: manipulation;
+}
+.lo-card--t1 { --tc: var(--tier-1); } .lo-card--t2 { --tc: var(--tier-2); } .lo-card--t3 { --tc: var(--tier-3); }
+.lo-card--t4 { --tc: var(--tier-4); } .lo-card--t5 { --tc: var(--tier-5); } .lo-card--t6 { --tc: var(--tier-6); }
+.lo-card:hover { border-color: var(--line-3); transform: translateY(-1px); }
+.lo-card.is-sel { border-color: var(--mint-400); box-shadow: inset 0 -2px 0 var(--tc), 0 0 0 1px var(--mint-500), 0 0 .16rem rgba(23, 249, 183, .35); }
+.lo-card:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 1px; }
+.lo-card__art { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #1b201e; }
+.lo-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.lo-card__art::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, transparent, rgba(8, 10, 9, .85)); }
+.lo-card__glyph { display: grid; place-items: center; width: 100%; height: 100%; font-size: .44rem; font-weight: 900; color: var(--text-dim); }
+.lo-card__tier { position: absolute; left: .03rem; top: .03rem; z-index: 1; }
+.lo-card__flag {
+  position: absolute; right: 0; top: 0; z-index: 1; width: .22rem; height: .22rem;
+  background: linear-gradient(225deg, var(--mint-400) 50%, transparent 50%);
+}
+.lo-card__name {
+  position: absolute; left: .05rem; right: .05rem; top: calc(100% - max(.64rem, 34px)); z-index: 1;
+  font-size: max(.15rem, 10px); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  text-shadow: 0 1px 2px #000;
+}
+.lo-card__kit { display: flex; align-items: center; justify-content: space-between; gap: .04rem; height: max(.3rem, 18px); padding: 0 .04rem; background: rgba(0, 0, 0, .4); }
+.lo-card__sk { display: inline-flex; align-items: center; gap: .04rem; font-size: max(.13rem, 9px); color: var(--text-lo); }
+.lo-card__sk b { font-family: var(--font-num); letter-spacing: .04em; }
+.lo-card__sk.is-alt { color: var(--mint-400); }
+.lo-card__mod {
+  display: inline-grid; place-items: center; min-width: max(.24rem, 15px); height: max(.2rem, 13px); padding: 0 .03rem;
+  font-family: var(--font-num); font-size: max(.13rem, 9px); font-weight: 700; color: var(--text-lo);
+  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04);
+}
+.lo-card__mod.is-alt { color: var(--text-on-mint); background: var(--gold-2); border-color: var(--gold); }
+
+/* ---- skill icon / module glyph ---------------------------------------------------------------------------------------------- */
+.lo-sicon { position: relative; flex: none; display: inline-grid; place-items: center; width: .72rem; height: .72rem; background: #151a18; border: 1px solid var(--line-2); }
+.lo-sicon img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.lo-sicon--xs { width: max(.2rem, 13px); height: max(.2rem, 13px); border: 0; background: transparent; }
+.lo-sicon--xs .lo-sicon__glyph { display: none; }
+.lo-sicon--md { width: max(.72rem, 38px); height: max(.72rem, 38px); }
+.lo-sicon__glyph { font-family: var(--font-num); font-size: max(.2rem, 12px); font-weight: 700; color: var(--text-lo); letter-spacing: .04em; }
+.lo-sicon.is-on { border-color: #1ea0ff; }
+.lo-sicon__outline { position: absolute; inset: -.05rem; width: calc(100% + .1rem) !important; height: calc(100% + .1rem) !important; object-fit: fill; pointer-events: none; }
+.lo-sicon__ring { position: absolute; inset: -.05rem; border: 2px solid #1ea0ff; pointer-events: none; }
+
+.lo-mglyph { position: relative; flex: none; display: inline-grid; place-items: center; width: max(.56rem, 30px); height: max(.56rem, 30px);
+  background: linear-gradient(180deg, #2a322f, #151a18); border: 1px solid var(--line-3); }
+.lo-mglyph img { width: 78%; height: 78%; object-fit: contain; }
+.lo-mglyph__t { font-family: var(--font-num); font-size: max(.26rem, 15px); font-weight: 700; color: var(--gold-2); line-height: 1; }
+.lo-mglyph--none { background: #121615; border-style: dashed; }
+.lo-mglyph__slash { position: absolute; inset: 22%; border-radius: 50%; border: 2px solid var(--text-dim); }
+.lo-mglyph__slash::after { content: ''; position: absolute; left: 50%; top: -10%; bottom: -10%; width: 2px; background: var(--text-dim); transform: translateX(-50%) rotate(45deg); }
+
+/* ---- detail panel -------------------------------------------------------------------------------------------------------- */
+.lo-detail {
+  --bk-c: var(--mint-500);
+  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
+  background: linear-gradient(180deg, rgba(24, 30, 28, .97), rgba(10, 13, 12, .98));
+  border: 1px solid var(--line-2); box-shadow: 0 .14rem .4rem rgba(0, 0, 0, .45);
+}
+.lo-detail--empty { align-items: center; justify-content: center; font-size: max(.16rem, 11px); }
+.lo-dhead { position: relative; flex: none; display: grid; grid-template-columns: max(1.3rem, 60px) minmax(0, 1fr); gap: .16rem; padding: .16rem .18rem .14rem; border-bottom: 1px solid var(--line); }
+.lo-dhead__art { position: relative; overflow: hidden; aspect-ratio: 1 / 1.25; background: #1b201e; border: 1px solid var(--line-2); box-shadow: inset 0 -3px 0 var(--tc, var(--tier-1)); }
+.lo-dhead__art--t1 { --tc: var(--tier-1); } .lo-dhead__art--t2 { --tc: var(--tier-2); } .lo-dhead__art--t3 { --tc: var(--tier-3); }
+.lo-dhead__art--t4 { --tc: var(--tier-4); } .lo-dhead__art--t5 { --tc: var(--tier-5); } .lo-dhead__art--t6 { --tc: var(--tier-6); }
+.lo-dhead__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
+.lo-dhead__art .uthumb { width: 100%; height: 100%; }
+.lo-dhead__info { min-width: 0; display: flex; flex-direction: column; gap: .04rem; }
+.lo-dhead__chips { display: flex; align-items: center; gap: .08rem; }
+.lo-dhead__name { margin: .02rem 0 0; font-size: max(.34rem, 17px); font-weight: 900; letter-spacing: .06em; line-height: 1.1; }
+.lo-dhead__en { font-family: var(--font-display); font-size: max(.13rem, 9px); letter-spacing: .14em; color: var(--text-dim); text-transform: uppercase; }
+.lo-dhead__class { display: flex; align-items: center; gap: .05rem; font-size: max(.15rem, 10px); color: var(--text-md); }
+.lo-dhead__prof { width: max(.2rem, 13px); height: max(.2rem, 13px); object-fit: contain; }
+.lo-sep { width: 1px; height: .16rem; background: var(--line-3); margin: 0 .04rem; }
+.lo-dhead__bonds { display: flex; flex-wrap: wrap; gap: .05rem; margin-top: .02rem; }
+.lo-bond { display: inline-flex; align-items: center; gap: .04rem; padding: .01rem .08rem .01rem .04rem; font-size: max(.13rem, 9px); color: var(--text-md); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
+.lo-bond__icon { width: max(.18rem, 12px); height: max(.18rem, 12px); object-fit: contain; }
+.lo-bond__dot { width: .1rem; height: .1rem; border-radius: 50%; background: var(--mint-700); }
+.lo-dhead__reset { position: absolute; right: .12rem; top: .12rem; }
+
+.lo-detail__body { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: .12rem .18rem .2rem; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
+.lo-sec { display: flex; flex-direction: column; gap: .08rem; }
+.lo-sec + .lo-sec { margin-top: .18rem; }
+.lo-sec__head { display: flex; align-items: center; gap: .12rem; min-height: max(.36rem, 22px); }
+.lo-sec__head h3 { display: flex; align-items: baseline; gap: .08rem; margin: 0; font-size: max(.2rem, 13px); font-weight: 900; letter-spacing: .1em; }
+.lo-sec__head h3::before { content: ''; align-self: center; width: .05rem; height: .2rem; background: var(--mint-500); }
+.lo-sec__note { margin-left: auto; font-size: max(.13rem, 9px); color: var(--text-dim); }
+.lo-sec__note b { color: var(--text-md); }
+
+.lo-seg { margin-left: auto; display: inline-flex; border: 1px solid var(--line-2); }
+.lo-seg button {
+  height: max(.32rem, 22px); padding: 0 .12rem; font: inherit; font-size: max(.13rem, 10px); color: var(--text-lo);
+  background: transparent; border: 0; cursor: pointer; touch-action: manipulation;
+}
+.lo-seg button + button { border-left: 1px solid var(--line-2); }
+.lo-seg button.is-on { color: var(--text-on-mint); background: var(--mint-500); }
+.lo-seg button:disabled { opacity: .4; cursor: default; }
+
+/* skills */
+.lo-skills { display: flex; flex-direction: column; gap: .07rem; }
+.lo-skill {
+  position: relative; display: flex; align-items: flex-start; gap: .14rem; width: 100%; padding: .1rem .12rem .1rem .16rem;
+  font: inherit; color: var(--text-md); text-align: left; cursor: pointer;
+  background: rgba(255, 255, 255, .025); border: 1px solid var(--line);
+  transition: background var(--t-fast), border-color var(--t-fast);
+  touch-action: manipulation;
+}
+.lo-skill:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .04); }
+.lo-skill.is-on { color: var(--text-hi); background: linear-gradient(90deg, rgba(30, 160, 255, .13), rgba(30, 160, 255, .02) 70%); border-color: rgba(30, 160, 255, .55); }
+.lo-skill__deco { position: absolute; left: -1px; top: 50%; transform: translate(-40%, -50%); width: .14rem; height: .17rem; }
+.lo-skill__deco img, .lo-skill__deco i { display: block; width: 100%; height: 100%; }
+.lo-skill__deco i { background: #1ea0ff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
+.lo-skill__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
+.lo-skill__head { display: flex; align-items: center; gap: .08rem; flex-wrap: wrap; }
+.lo-skill__slot { font-family: var(--font-num); font-size: max(.13rem, 9px); font-weight: 700; color: var(--text-dim); padding: 0 .05rem; border: 1px solid var(--line-2); letter-spacing: .06em; }
+.lo-skill.is-on .lo-skill__slot { color: #7cc8ff; border-color: rgba(30, 160, 255, .55); }
+.lo-skill__name { font-size: max(.19rem, 12px); font-weight: 700; color: var(--text-hi); }
+.lo-skill__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .06rem; }
+.lo-skill__desc { display: block; font-size: max(.15rem, 10px); line-height: 1.55; color: var(--text-md); }
+.lo-sp { padding: .01rem .07rem; font-size: max(.12rem, 9px); font-weight: 700; color: #0b0d0c; background: #9bd26b; }
+.lo-sp--atk { background: #ff9a3c; }
+.lo-sp--def { background: #f5c542; }
+.lo-sp--passive { background: #9aa4a0; }
+.lo-tag { font-size: max(.13rem, 9px); color: var(--text-lo); }
+.lo-tag b { color: var(--text-hi); font-family: var(--font-num); margin-left: .02rem; }
+
+.lo-badge { display: inline-flex; align-items: center; gap: .03rem; padding: .01rem .07rem; font-size: max(.12rem, 9px); font-weight: 700; line-height: 1.4; letter-spacing: .04em; white-space: nowrap; }
+.lo-badge .icon { width: .13rem; height: .13rem; }
+.lo-badge--def { color: var(--gold-2); border: 1px solid rgba(242, 189, 62, .55); }
+.lo-badge--on { color: #0b1a26; background: #1ea0ff; }
+.lo-badge--changed { color: var(--text-on-mint); background: var(--mint-500); }
+.lo-badge--plain { color: var(--text-dim); border: 1px solid var(--line-2); }
+
+/* modules */
+.lo-mods { display: flex; flex-wrap: wrap; gap: .08rem; }
+.lo-mod {
+  position: relative; flex: 1 1 1.9rem; min-width: 1.7rem; max-width: 3.2rem; display: flex; align-items: center; gap: .1rem; padding: .08rem .12rem .08rem .08rem;
+  font: inherit; color: var(--text-md); text-align: left; cursor: pointer;
+  background: rgba(255, 255, 255, .025); border: 1px solid var(--line);
+  transition: background var(--t-fast), border-color var(--t-fast); touch-action: manipulation;
+}
+.lo-mod:hover { border-color: var(--line-3); }
+.lo-mod.is-on { color: var(--text-hi); background: linear-gradient(90deg, rgba(242, 189, 62, .14), rgba(242, 189, 62, .02) 75%); border-color: rgba(242, 189, 62, .7); }
+.lo-mod.is-on .lo-mglyph { border-color: var(--gold-2); box-shadow: 0 0 .1rem rgba(255, 198, 0, .35); }
+.lo-mod__text { min-width: 0; display: flex; flex-direction: column; gap: .01rem; }
+.lo-mod__type { font-family: var(--font-num); font-size: max(.12rem, 9px); letter-spacing: .1em; color: var(--text-dim); }
+.lo-mod__name { font-size: max(.16rem, 11px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lo-mod__def { position: absolute; right: .04rem; top: .04rem; }
+
+.lo-minfo { margin-top: .04rem; padding: .1rem .12rem; display: flex; flex-direction: column; gap: .07rem; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); border-left: 3px solid var(--gold-2); }
+.lo-minfo--none { border-left-color: var(--line-3); }
+.lo-minfo__lead { margin: 0; font-size: max(.15rem, 10px); color: var(--text-lo); }
+.lo-minfo__title { display: flex; align-items: center; gap: .08rem; font-size: max(.17rem, 11px); }
+.lo-minfo__type { font-family: var(--font-num); font-size: max(.13rem, 9px); color: var(--gold-2); letter-spacing: .1em; }
+.lo-minfo__icon { flex: none; width: max(.26rem, 16px); height: max(.26rem, 16px); object-fit: contain; }
+.lo-minfo__row { display: grid; grid-template-columns: max(.5rem, 28px) minmax(0, 1fr); gap: .08rem; align-items: baseline; }
+.lo-minfo__k { font-size: max(.13rem, 9px); color: var(--text-dim); letter-spacing: .08em; }
+.lo-minfo__v { font-size: max(.15rem, 10px); line-height: 1.55; color: var(--text-md); }
+.lo-minfo__tname { color: var(--text-hi); margin-right: .06rem; }
+.lo-attrs { display: flex; flex-wrap: wrap; gap: .06rem; }
+.lo-attr { display: inline-flex; align-items: baseline; gap: .04rem; padding: .01rem .08rem; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: max(.13rem, 9px); color: var(--text-lo); }
+.lo-attr b { font-family: var(--font-num); font-size: max(.15rem, 10px); }
+.lo-attr.is-up b { color: var(--mint-400); }
+.lo-attr.is-down b { color: var(--red-premium); }
+.lo-locknote { display: flex; align-items: center; gap: .06rem; margin: .16rem 0 0; font-size: max(.14rem, 10px); color: var(--amber); }
+.lo-locknote .icon { width: .16rem; height: .16rem; }
+
+/* ---- entry button (lobby / room / briefing) --------------------------------------------------------------------------- */
+.lo-entry { position: relative; gap: .08rem; }
+.lo-entry__icon { width: 1.25em; height: 1.25em; object-fit: contain; flex: none; }
+.lo-entry__n {
+  display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .3em; margin-left: .02rem;
+  font-size: .8em; font-weight: 700; color: var(--text-on-mint); background: var(--mint-500); border-radius: 1em;
+}
+
+/* Untimed phases (user playtest #11: the official 独立模拟 shows no countdown outside combat — the server sends
+   deadline 0 for them, Match.soloUntimed): ui/components.js Countdown renders its "无倒计时" placeholder ("--" digits +
+   COUNTDOWN label), which reads as a timer — it is not shown at all. (Owner of components.js: returning null there
+   for a missing deadline makes this rule a no-op.) */
+.countdown[aria-label="无倒计时"] { display: none; }
+
+/* the app screens behind the overlay do not need to animate */
+.sp-loadout-open .app-root > .screen { visibility: hidden; }
+
+/* ---- narrow / short viewports ------------------------------------------------------------------------------------------- */
+@media (max-width: 1100px) {
+  .lo-body { grid-template-columns: minmax(0, 1fr) minmax(0, 6.4rem); gap: .16rem; padding: .12rem .2rem .16rem; }
+  .lo-chip__lbl { display: none; }
+}
+/* phones (the root scale is clamped at 40 px: less than ~14 rem of width): the detail slides over the roster */
+@media (max-width: 760px) {
+  .lo-top { padding: 0 .16rem; }
+  .lo-count, .lo-sync { display: none; }
+  .lo-body { grid-template-columns: minmax(0, 1fr); }
+  .lo-detail-wrap { display: none; }
+  .lo-body.is-detail .lo-roster { display: none; }
+  .lo-body.is-detail .lo-detail-wrap { display: flex; }
+  .lo-detail-back {
+    display: inline-flex; align-self: flex-start; align-items: center; gap: .04rem; margin-bottom: .08rem; padding: .04rem .12rem .04rem .04rem;
+    font: inherit; font-size: max(.15rem, 11px); color: var(--mint-400); background: transparent; border: 1px solid var(--mint-800); cursor: pointer;
+  }
+  .lo-detail-back .icon { width: .2rem; height: .2rem; }
+}
+@media (max-height: 520px) {
+  .lo-note { display: none; }
+  .lo-dhead { grid-template-columns: max(1rem, 48px) minmax(0, 1fr); padding: .1rem .14rem; }
+  .lo-dhead__en { display: none; }
+  .lo-grid { grid-template-columns: repeat(auto-fill, minmax(max(1rem, 58px), 1fr)); }
+}
+/* the shared Button / TextField scale with the root (40 px/rem on phones ⇒ 6–7 px text, 14–20 px tall): the overlay's
+   own controls (返回, 全部恢复默认, 恢复默认, the search field) keep a readable size and a tappable height (review fix) */
+.lo .lo-back { height: max(.5rem, 32px); padding: 0 max(.2rem, 10px) 0 max(.12rem, 6px); font-size: max(.18rem, 12px); }
+.lo .lo-top__right .btn, .lo .lo-dhead__reset { height: max(.36rem, 28px); padding: 0 max(.16rem, 8px); font-size: max(.15rem, 11px); }
+.lo .lo-search .field__box { height: max(.56rem, 28px); padding: 0 max(.16rem, 6px); }
+.lo .lo-search .field__input { font-size: max(.2rem, 12px); }
+.lo .lo-search .field__icon { width: max(.22rem, 14px); height: max(.22rem, 14px); }
+.sp-coarse .lo-chip, .sp-coarse .lo-toggle, .sp-coarse .lo-select { min-height: 30px; }
+.sp-coarse .lo-seg button { min-height: 28px; }
+@media (prefers-reduced-motion: reduce) { .lo, .lo-card { animation: none; transition: none; } }

public/css/screens/lobby.css

@@ -0,0 +1,240 @@
+/* ==========================================================================================
+   screens/lobby.css — mode cards (独立/同盟), difficulty cards, create button, join panel.
+   ========================================================================================== */
+
+.lobby-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
+  gap: .5rem;
+  width: 100%;
+  max-width: 19.2rem;
+  margin: 0 auto;
+  padding: .36rem .6rem .4rem;
+  align-content: start;
+}
+.lobby-left, .lobby-right { display: flex; flex-direction: column; min-width: 0; }
+
+/* ---- mode cards ------------------------------------------------------------------------------------ */
+.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .24rem; margin-bottom: .34rem; }
+.mode-card {
+  --bk-c: transparent;
+  --bk-l: .2rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: .22rem;
+  min-height: 4.3rem;
+  padding: .34rem .32rem .3rem;
+  overflow: hidden;
+  text-align: left;
+  background: linear-gradient(180deg, rgba(28, 34, 31, .92), rgba(13, 16, 15, .94));
+  border: 1px solid var(--line);
+  color: var(--text-hi);
+  transition: border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), transform var(--t-fast) var(--ease-out);
+  animation: card-in var(--t-slow) var(--ease-out) backwards;
+}
+.mode-card:nth-child(2) { animation-delay: 60ms; }
+.mode-card__bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(70% 55% at 100% 0%, rgba(78, 216, 175, .10), transparent 70%),
+    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 12px),
+    linear-gradient(transparent 70%, rgba(0, 0, 0, .35));
+  transition: opacity var(--t-med);
+}
+.mode-card::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--mint-500), transparent);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform var(--t-slow) var(--ease-out);
+}
+.mode-card__icon {
+  position: relative;
+  width: .88rem;
+  height: .88rem;
+  display: grid;
+  place-items: center;
+  background: #0c0f0e;
+  border: 1px solid var(--line-2);
+  color: var(--text-md);
+  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
+  transition: background var(--t-med), color var(--t-med);
+}
+.mode-card__icon .icon { width: .44rem; height: .44rem; }
+.mode-card__text { position: relative; display: flex; flex-direction: column; gap: .1rem; }
+.mode-card__name { font-size: .46rem; font-weight: 900; letter-spacing: .08em; line-height: 1.1; }
+.mode-card__desc { font-size: .17rem; color: var(--text-lo); line-height: 1.65; max-width: 3.6rem; }
+.mode-card__points { display: flex; flex-direction: column; gap: .05rem; margin-top: .06rem; font-size: .15rem; color: var(--text-md); }
+.mode-card__points span::before {
+  content: '';
+  display: inline-block;
+  width: .06rem;
+  height: .06rem;
+  margin: 0 .1rem .02rem 0;
+  background: var(--mint-700);
+  transform: rotate(45deg);
+  vertical-align: middle;
+}
+.mode-card__check {
+  position: absolute;
+  top: .2rem;
+  right: .2rem;
+  display: flex;
+  align-items: center;
+  gap: .05rem;
+  padding: .04rem .12rem .04rem .08rem;
+  background: var(--mint-500);
+  color: var(--text-on-mint);
+  font-size: .14rem;
+  font-weight: 700;
+  opacity: 0;
+  transform: translateY(-.06rem);
+  transition: opacity var(--t-med), transform var(--t-med) var(--ease-out);
+}
+.mode-card__check .icon { width: .16rem; height: .16rem; }
+.mode-card:hover { border-color: var(--line-3); --bk-c: var(--line-3); }
+.mode-card:active { transform: translateY(1px); }
+.mode-card.is-selected {
+  --bk-c: var(--mint-400);
+  border-color: var(--mint-700);
+  box-shadow: 0 0 0 1px rgba(78, 216, 175, .22), 0 0 .44rem rgba(23, 249, 183, .13), inset 0 0 .7rem rgba(23, 249, 183, .05);
+}
+.mode-card.is-selected::before { transform: scaleX(1); }
+.mode-card.is-selected .mode-card__icon { background: var(--mint-500); border-color: var(--mint-400); color: var(--text-on-mint); }
+.mode-card.is-selected .mode-card__check { opacity: 1; transform: none; }
+@keyframes card-in { from { opacity: 0; transform: translateY(.14rem); } }
+
+/* ---- join panel ------------------------------------------------------------------------------------ */
+.join-panel .panel__body { display: flex; flex-direction: column; gap: .14rem; padding: .22rem .26rem .18rem; }
+.join-row { display: flex; gap: .16rem; align-items: stretch; }
+.join-row .field { flex: 1; }
+.join-row .btn { height: .64rem; }
+.join-foot { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem; min-height: .32rem; font-size: .14rem; }
+.code-chip {
+  padding: .03rem .12rem .03rem .16rem;
+  border: 1px solid var(--line-2);
+  background: rgba(0, 0, 0, .3);
+  color: var(--amber);
+  font-size: .17rem;
+  font-weight: 700;
+  letter-spacing: .2em;
+  transition: border-color var(--t-fast), background-color var(--t-fast);
+}
+.code-chip:hover { border-color: var(--amber); background: rgba(246, 163, 41, .08); }
+
+/* ---- tips -------------------------------------------------------------------------------------------- */
+.tips {
+  --bk-c: var(--line-3);
+  margin-top: .3rem;
+  padding: .16rem .22rem .2rem;
+  background: rgba(8, 10, 9, .55);
+  border: 1px solid var(--line);
+}
+.tips__head { display: flex; align-items: center; gap: .1rem; font-size: .16rem; font-weight: 700; color: var(--text-md); }
+.tips__head > .icon { width: .2rem; height: .2rem; color: var(--mint-500); }
+.tips__idx { margin-left: auto; font-size: .16rem; color: var(--text-md); }
+.tips__nav {
+  display: grid;
+  place-items: center;
+  width: .3rem;
+  height: .3rem;
+  padding: 0;
+  border: 1px solid var(--line-2);
+  background: transparent;
+  color: var(--text-lo);
+  transition: color var(--t-fast), border-color var(--t-fast);
+}
+.tips__nav:hover { color: var(--mint-400); border-color: var(--mint-700); }
+.tips__nav .icon { width: .18rem; height: .18rem; }
+.tips__text { margin-top: .1rem; font-size: .17rem; color: var(--text-lo); line-height: 1.6; animation: tip-in var(--t-slow) var(--ease-out); }
+@keyframes tip-in { from { opacity: 0; transform: translateX(.1rem); } }
+
+/* ---- difficulty cards -------------------------------------------------------------------------------- */
+.diff-list { display: flex; flex-direction: column; gap: .14rem; }
+.diff-card {
+  --d-color: var(--amber);
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto auto auto;
+  gap: .06rem .2rem;
+  padding: .18rem .24rem .18rem .36rem;
+  overflow: hidden;
+  text-align: left;
+  background: linear-gradient(90deg, rgba(28, 34, 31, .93), rgba(15, 19, 17, .93));
+  border: 1px solid var(--line);
+  color: var(--text-hi);
+  transition: border-color var(--t-med), box-shadow var(--t-med), background var(--t-med);
+  animation: card-in var(--t-slow) var(--ease-out) backwards;
+}
+.diff-card:nth-child(2) { animation-delay: 40ms; }
+.diff-card:nth-child(3) { animation-delay: 80ms; }
+.diff-card:nth-child(4) { animation-delay: 120ms; }
+.diff-card__bar { position: absolute; left: 0; top: 0; bottom: 0; width: .06rem; background: var(--d-color); opacity: .45; transition: opacity var(--t-med), box-shadow var(--t-med); }
+.diff-card__head { grid-column: 1 / -1; display: flex; align-items: center; gap: .1rem; min-width: 0; }
+.diff-card__glyph { width: .28rem; height: .28rem; color: var(--d-color); filter: drop-shadow(0 0 5px var(--d-color)); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--d-color) 55%, transparent)); }
+.diff-card__name { font-size: .27rem; font-weight: 900; letter-spacing: .06em; color: var(--d-color); }
+.diff-card__code { font-size: .14rem; color: var(--text-dim); letter-spacing: .1em; }
+.diff-card__meta { margin-left: auto; display: flex; align-items: center; gap: .04rem; font-size: .14rem; color: var(--text-lo); white-space: nowrap; }
+.diff-card__meta .num { color: var(--text-hi); font-weight: 700; font-size: .17rem; }
+.diff-card__hidden {
+  margin-left: .08rem;
+  padding: 0 .07rem;
+  border: 1px solid transparent; border: 1px solid color-mix(in srgb, var(--d-color) 45%, transparent);
+  color: var(--d-color); color: color-mix(in srgb, var(--d-color) 80%, #fff);
+  font-size: .12rem;
+  line-height: 1.6;
+}
+.diff-card__desc { grid-column: 1; font-size: .16rem; color: var(--text-md); }
+.diff-card__effects { grid-column: 1; display: flex; flex-wrap: wrap; gap: .04rem .2rem; font-size: .14rem; color: var(--text-lo); }
+.diff-card__effects span::before { content: '·'; margin-right: .05rem; color: var(--d-color); font-weight: 900; }
+/* battlefield pool note (config.json modes[].stages): 战场固定为 战场#01 / 战场随机（共N张） — the last item of the
+   effects row (no extra card height: the lobby must not scroll at 1280×720 / 1920×1080) */
+.diff-card__effects .diff-card__stage { display: inline-flex; align-self: flex-start; align-items: center; gap: .05rem; }
+.diff-card__effects .diff-card__stage::before { content: none; }
+.diff-card__stage .icon { flex: none; width: .15rem; height: .15rem; color: var(--d-color); opacity: .85; }
+.diff-card__check {
+  grid-column: 2;
+  grid-row: 2 / span 2;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: .03rem;
+  font-size: .12rem;
+  color: var(--text-dim);
+}
+.diff-card__check .icon {
+  width: .46rem;
+  height: .46rem;
+  padding: .09rem;
+  border-radius: 50%;
+  border: 2px solid var(--line-2);
+  color: transparent;
+  transition: background var(--t-med), border-color var(--t-med), color var(--t-med), transform var(--t-med) var(--ease-out);
+}
+.diff-card__check span { opacity: 0; transition: opacity var(--t-med); }
+.diff-card:hover { border-color: var(--line-3); }
+.diff-card.is-selected {
+  border-color: var(--d-color); border-color: color-mix(in srgb, var(--d-color) 65%, transparent);
+  background: linear-gradient(90deg, #151a18, rgba(15, 19, 17, .95) 70%); background: linear-gradient(90deg, color-mix(in srgb, var(--d-color) 15%, #151a18), rgba(15, 19, 17, .95) 70%);
+  box-shadow: 0 0 .3rem transparent; box-shadow: 0 0 .3rem color-mix(in srgb, var(--d-color) 16%, transparent);
+}
+.diff-card.is-selected .diff-card__bar { opacity: 1; box-shadow: 0 0 .14rem var(--d-color); }
+.diff-card.is-selected .diff-card__check { color: var(--d-color); }
+.diff-card.is-selected .diff-card__check .icon { background: var(--d-color); border-color: var(--d-color); color: #150a04; transform: rotate(-8deg); }
+.diff-card.is-selected .diff-card__check span { opacity: 1; }
+
+/* ---- create ------------------------------------------------------------------------------------------ */
+.create-box { margin-top: .3rem; display: flex; flex-direction: column; gap: .12rem; }
+.create-box .btn--xl { height: .92rem; font-size: .32rem; letter-spacing: .3em; }
+.create-box__hint { display: flex; align-items: center; justify-content: center; min-height: .3rem; font-size: .14rem; color: var(--text-lo); }

public/css/screens/result.css

@@ -0,0 +1,78 @@
+/* ==========================================================================================
+   screens/result.css — settlement (js/screens/result.js). Research 06 §10.6: mint 模拟完成 headline,
+   huge "通过回合" numerals, boss medallions, per-player cards with lineup, bonds, stats and 评语.
+   ========================================================================================== */
+
+.result__bg { position: absolute; inset: 0; z-index: 0; background: var(--result-bg, none) center / cover no-repeat; opacity: .55; filter: saturate(.9); }
+.result__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 11, 10, .72), rgba(8, 11, 10, .5) 40%, rgba(8, 11, 10, .88) 62%); }
+.result__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
+  background: linear-gradient(rgba(78, 216, 175, .04) 1px, transparent 1px) 0 0 / .6rem .6rem, linear-gradient(90deg, rgba(78, 216, 175, .04) 1px, transparent 1px) 0 0 / .6rem .6rem;
+  -webkit-mask-image: radial-gradient(70% 70% at 25% 50%, #000, transparent); mask-image: radial-gradient(70% 70% at 25% 50%, #000, transparent); }
+.result__main { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: 5.6rem 1fr; gap: .5rem; padding: .36rem .5rem .3rem .6rem; }
+.result__hero { display: flex; flex-direction: column; align-items: flex-start; gap: .16rem; padding-top: .3rem; min-height: 0; }
+.result__logoimg { height: 1.1rem; width: auto; opacity: .92; }
+.result__headline { font-size: .96rem; font-weight: 900; letter-spacing: .12em; line-height: 1.05; color: var(--mint-400); text-shadow: 0 0 .4rem rgba(23, 249, 183, .45); animation: head-in 600ms var(--ease-out); }
+.result.is-lose .result__headline { color: var(--red-premium); text-shadow: 0 0 .4rem rgba(255, 60, 60, .4); }
+@keyframes head-in { from { opacity: 0; letter-spacing: .5em; } }
+.result__sub { font-size: .2rem; color: var(--text-lo); letter-spacing: .1em; }
+.result__rounds { display: flex; align-items: baseline; gap: .12rem; margin-top: .1rem; }
+.result__rlabel { font-size: .22rem; color: var(--text-md); letter-spacing: .14em; }
+.result__rnum { font-size: 1.5rem; line-height: .9; font-weight: 700; color: #fff; }
+.result__rof { font-size: .4rem; color: var(--text-dim); }
+.result__medals { display: flex; gap: .24rem; margin-top: .12rem; }
+.medal { position: relative; width: 1.1rem; display: flex; flex-direction: column; align-items: center; gap: .08rem; }
+.medal img { width: .96rem; height: .96rem; object-fit: cover; border-radius: 50%; border: 3px solid var(--line-3); background: #151a18; filter: grayscale(.7) brightness(.7); }
+.medal.is-done img { border-color: var(--gold); filter: none; box-shadow: 0 0 .24rem rgba(255, 198, 0, .4); }
+.medal--hidden.is-done img { border-color: var(--red-premium); box-shadow: 0 0 .24rem rgba(255, 60, 60, .4); }
+.medal__check { position: absolute; right: .04rem; top: .64rem; width: .32rem; height: .32rem; display: grid; place-items: center; background: var(--text-dim); color: #fff; border-radius: 50%; }
+.medal.is-done .medal__check { background: var(--gold); color: #1d1400; }
+.medal__check .icon { width: .2rem; height: .2rem; }
+.medal__label { font-size: .14rem; color: var(--text-lo); }
+.result__time { font-size: .16rem; }
+.result__time b { color: var(--text-hi); }
+
+.result__players { display: flex; flex-direction: column; gap: .1rem; min-height: 0; overflow: auto; padding-right: .06rem; }
+.result__players > :first-child { margin-top: auto; }
+.result__players > :last-child { margin-bottom: auto; }
+.rcard {
+  display: flex; flex-direction: column; gap: .09rem; padding: .12rem .18rem .14rem; background: rgba(11, 15, 13, .9); border: 1px solid var(--line);
+  border-left: 3px solid var(--line-3); animation: card-in var(--t-slow) var(--ease-out) backwards;
+}
+.rcard:nth-child(3) { animation-delay: 80ms; } .rcard:nth-child(4) { animation-delay: 160ms; } .rcard:nth-child(5) { animation-delay: 240ms; }
+@keyframes card-in { from { opacity: 0; transform: translateX(.3rem); } }
+.rcard.is-self { border-left-color: var(--mint-500); background: linear-gradient(90deg, rgba(78, 216, 175, .08), rgba(11, 15, 13, .9) 40%); }
+.rcard.is-dead { opacity: .8; }
+.rcard__head { display: grid; grid-template-columns: auto minmax(1.5rem, 2.1rem) minmax(0, 1fr) auto 2.3rem; gap: .18rem; align-items: center; }
+.rcard__head .pavatar { --pa: .6rem; }
+.rcard__who { display: flex; flex-direction: column; gap: .03rem; min-width: 0; }
+.rcard__name { font-size: .22rem; display: flex; align-items: center; gap: .08rem; }
+.rcard__ai, .rcard__you { font-size: .11rem; padding: 0 .05rem; font-weight: 700; }
+.rcard__ai { background: #a9c3d8; color: #0b1520; }
+.rcard__you { background: var(--mint-500); color: var(--text-on-mint); }
+.rcard__band { display: inline-flex; align-items: center; gap: .06rem; font-size: .15rem; color: var(--text-lo); }
+.rcard__round { display: flex; flex-direction: column; align-items: center; }
+.rcard__round b { font-size: .34rem; line-height: 1; color: #fff; }
+.rcard__gain { display: flex; gap: .08rem; margin-top: .03rem; font-size: .13rem; color: var(--gold); }
+.rcard__gain span { display: inline-flex; align-items: center; gap: .02rem; }
+.rcard__gain .icon { width: .14rem; height: .14rem; }
+.rcard__gain b { font-size: .14rem; color: var(--gold); }
+.rcard__title { display: flex; align-items: center; gap: .08rem; padding: .06rem .14rem .06rem .06rem; border: 1px solid rgba(255, 198, 0, .4); background: rgba(255, 198, 0, .06); min-width: 0; }
+.rcard__title--none { border-style: dashed; border-color: var(--line); background: none; height: .64rem; }
+.rcard__title > span { display: flex; flex-direction: column; }
+.rcard__title b { font-size: .19rem; color: var(--gold); }
+.rcard__ticon { width: .5rem; height: .5rem; object-fit: contain; }
+.rcard__title .icon { width: .3rem; height: .3rem; color: var(--gold); }
+.rcard__mid { display: flex; flex-direction: column; justify-content: center; gap: .06rem; min-width: 0; }
+.rcard__lineup .uthumb { --ut: .46rem; }
+.rcard__lineup { display: flex; flex-wrap: wrap; gap: .05rem; }
+.rcard__noinfo { font-family: var(--font-display); font-size: .14rem; letter-spacing: .3em; color: var(--text-dim); padding: .14rem .2rem; border: 1px dashed var(--line-2); }
+.rcard__bonds { display: flex; gap: .05rem; flex-wrap: wrap; }
+.rbond { display: inline-flex; align-items: center; gap: .04rem; padding: .01rem .07rem .01rem .03rem; border: 1px solid var(--line-2); font-size: .13rem; color: var(--text-lo); }
+.rbond .bglyph { width: .2rem; height: .2rem; }
+.rbond.is-on { border-color: var(--mint-800); color: var(--mint-400); }
+.rcard__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; }
+.rstat { display: flex; align-items: baseline; justify-content: space-between; gap: .06rem; padding: .05rem .1rem; background: #0e1210; box-shadow: 0 0 0 1px var(--line); font-size: .13rem; color: var(--text-lo); white-space: nowrap; min-width: 0; }
+.rstat b { font-size: .18rem; color: #fff; }
+.rstat.is-best b { color: var(--gold); }
+.result__foot { margin-top: auto; padding-top: .2rem; display: flex; }
+.result__foot .btn { min-width: 3.4rem; }

public/css/screens/room.css

@@ -0,0 +1,277 @@
+/* ==========================================================================================
+   screens/room.css — room/waiting screen: invite key, 4 seat cards, bottom action bar.
+   ========================================================================================== */
+
+.room-screen .topbar { height: 1.36rem; }
+.room-ping { display: flex; flex-direction: column; align-items: flex-start; gap: .04rem; }
+
+/* ---- invite key ---------------------------------------------------------------------------------------- */
+.invite {
+  --bk-c: var(--mint-500);
+  display: grid;
+  grid-template-columns: auto auto;
+  column-gap: .2rem;
+  row-gap: .06rem;
+  align-items: center;
+  padding: .1rem .16rem .12rem;
+  background: rgba(0, 0, 0, .38);
+  border: 1px solid var(--line);
+}
+.invite__label { grid-column: 1 / -1; display: flex; align-items: center; gap: .07rem; font-size: .14rem; color: var(--text-lo); }
+.invite__label .icon { width: .16rem; height: .16rem; color: var(--mint-500); }
+.invite__code { display: flex; gap: .06rem; }
+.invite__code span {
+  display: grid;
+  place-items: center;
+  width: .46rem;
+  height: .58rem;
+  background: linear-gradient(180deg, rgba(78, 216, 175, .1), rgba(78, 216, 175, .02));
+  border-bottom: 2px solid var(--mint-600);
+  color: var(--mint-400);
+  font-size: .44rem;
+  font-weight: 700;
+  line-height: 1;
+  text-shadow: 0 0 .16rem rgba(23, 249, 183, .45);
+}
+.invite__btns { display: flex; flex-direction: column; gap: .06rem; }
+.solo-note { display: flex; flex-direction: column; align-items: flex-end; gap: .03rem; font-size: .16rem; color: var(--text-lo); }
+
+/* ---- seats ------------------------------------------------------------------------------------------------ */
+.seats {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 3.8rem));
+  grid-template-rows: minmax(0, 6rem);
+  justify-content: center;
+  align-content: center;
+  gap: .3rem;
+  padding: .3rem .6rem .24rem;
+}
+.seats--solo { grid-template-columns: 3.8rem minmax(0, 6.4rem); }
+
+.seat {
+  --bk-c: var(--line-3);
+  --bk-l: .18rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: .07rem;
+  height: 100%;
+  min-height: 0;
+  padding: .16rem .2rem .18rem;
+  background:
+    repeating-linear-gradient(0deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px),
+    linear-gradient(180deg, rgba(29, 35, 32, .95), rgba(11, 14, 13, .97));
+  border: 1px solid var(--line);
+  box-shadow: 0 .14rem .34rem rgba(0, 0, 0, .4);
+  transition: border-color var(--t-med), box-shadow var(--t-med);
+  animation: seat-in var(--t-slow) var(--ease-out) backwards;
+  animation-delay: calc(var(--seat-i, 0) * 60ms);
+}
+@keyframes seat-in { from { opacity: 0; transform: translateY(.18rem); } }
+.seat::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 3px;
+  background: var(--line-2);
+  transition: background var(--t-med), box-shadow var(--t-med);
+}
+.seat__head { align-self: stretch; display: flex; align-items: center; gap: .1rem; }
+.seat__no { font-size: .22rem; font-weight: 700; color: var(--text-md); padding-left: .08rem; border-left: 3px solid var(--line-3); line-height: 1.1; }
+.seat__host {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: .04rem;
+  padding: .02rem .09rem;
+  background: var(--gold);
+  color: #1d1400;
+  font-size: .13rem;
+  font-weight: 700;
+}
+.seat__host .icon { width: .15rem; height: .15rem; }
+.seat__art {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: .08rem;
+  margin: .06rem 0 .04rem;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 50% 42%, rgba(78, 216, 175, .08), transparent 62%),
+    linear-gradient(rgba(78, 216, 175, .04) 1px, transparent 1px) 0 0 / .3rem .3rem,
+    linear-gradient(90deg, rgba(78, 216, 175, .04) 1px, transparent 1px) 0 0 / .3rem .3rem,
+    #0b0e0d;
+  border: 1px solid rgba(255, 255, 255, .04);
+}
+.seat__stripes {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: .14rem;
+  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .06) 0 .05rem, transparent .05rem .1rem);
+}
+.seat__art .avatar { --av: 2.1rem; }
+.seat__bot-label {
+  display: flex;
+  align-items: center;
+  gap: .05rem;
+  padding: .02rem .1rem;
+  background: rgba(159, 212, 255, .1);
+  border: 1px solid rgba(159, 212, 255, .35);
+  color: var(--ice);
+  font-size: .14rem;
+  font-weight: 700;
+}
+.seat__bot-label .icon { width: .16rem; height: .16rem; }
+.seat__who { display: flex; align-items: center; gap: .08rem; max-width: 100%; }
+.seat__name { font-size: .26rem; font-weight: 700; max-width: 3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.seat__you { flex: none; padding: .01rem .07rem; background: var(--mint-500); color: var(--text-on-mint); font-size: .13rem; font-weight: 700; }
+.seat__foot {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: .1rem;
+  min-height: .46rem;
+  margin-top: .06rem;
+  padding-top: .1rem;
+  border-top: 1px solid var(--line);
+}
+.seat__foot .tt-anchor { position: absolute; right: .14rem; bottom: .14rem; }
+.seat__state { display: flex; align-items: center; gap: .06rem; font-size: .18rem; font-weight: 700; letter-spacing: .06em; }
+.seat__state .icon { width: .22rem; height: .22rem; }
+.seat__state--ready { color: var(--mint-400); }
+.seat__state--waiting { color: var(--text-lo); }
+.seat__state--offline { color: var(--orange-hi); }
+.seat__state--host { color: var(--gold-2); }
+
+.seat.is-ready { --bk-c: var(--mint-500); border-color: var(--mint-800); }
+.seat.is-ready::before { background: var(--mint-500); box-shadow: 0 0 .12rem rgba(23, 249, 183, .6); }
+.seat.is-host .seat__no { border-left-color: var(--gold); }
+.seat.is-me { box-shadow: 0 0 0 1px rgba(78, 216, 175, .28), 0 0 .44rem rgba(23, 249, 183, .12), 0 .14rem .34rem rgba(0, 0, 0, .4); }
+.seat.is-me .seat__no { color: var(--mint-400); }
+.seat.is-offline::before { background: var(--orange); }
+.seat.is-bot .seat__art { background:
+    radial-gradient(circle at 50% 42%, rgba(159, 212, 255, .08), transparent 62%),
+    linear-gradient(rgba(159, 212, 255, .04) 1px, transparent 1px) 0 0 / .3rem .3rem,
+    linear-gradient(90deg, rgba(159, 212, 255, .04) 1px, transparent 1px) 0 0 / .3rem .3rem,
+    #0b0e10; }
+
+.seat--empty { background: rgba(10, 13, 12, .5); border-style: dashed; border-color: var(--line-2); box-shadow: none; }
+.seat--empty .seat__art { background: transparent; border: 0; }
+.seat__radar {
+  width: 1.3rem;
+  height: 1.3rem;
+  border-radius: 50%;
+  background:
+    repeating-radial-gradient(circle, transparent 0 .2rem, rgba(78, 216, 175, .14) .2rem .21rem),
+    conic-gradient(from 0deg, rgba(23, 249, 183, .2), transparent 25%);
+  -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 71%);
+  mask-image: radial-gradient(circle, #000 60%, transparent 71%);
+  animation: radar-sweep 4s linear infinite;
+}
+@keyframes radar-sweep { to { transform: rotate(360deg); } }
+.seat__wait { font-size: .2rem; color: var(--text-lo); letter-spacing: .08em; }
+.seat--empty .seat__foot { border-top-style: dashed; }
+
+.solo-brief {
+  --bk-c: var(--mint-500);
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: .14rem;
+  height: 100%;
+  padding: .34rem .4rem;
+  background:
+    repeating-linear-gradient(0deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px),
+    linear-gradient(180deg, rgba(24, 29, 27, .92), rgba(11, 14, 13, .95));
+  border: 1px solid var(--line);
+  animation: seat-in var(--t-slow) 80ms var(--ease-out) backwards;
+}
+.solo-brief h2 { font-size: .36rem; font-weight: 900; letter-spacing: .06em; }
+.solo-brief p { font-size: .18rem; color: var(--text-md); }
+.solo-brief ul { margin: .06rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .08rem; font-size: .16rem; color: var(--text-lo); }
+.solo-brief li::before { content: ''; display: inline-block; width: .06rem; height: .06rem; margin: 0 .12rem .02rem 0; background: var(--mint-600); transform: rotate(45deg); vertical-align: middle; }
+.solo-brief b { color: var(--text-hi); }
+
+/* ---- bottom bar ----------------------------------------------------------------------------------------- */
+.room-bar {
+  position: relative;
+  flex: none;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: .3rem;
+  height: 1.5rem;
+  padding: 0 .6rem;
+  background: linear-gradient(0deg, rgba(7, 9, 8, .96), rgba(10, 13, 12, .7));
+  border-top: 1px solid var(--line);
+}
+.room-bar::before {
+  content: '';
+  position: absolute;
+  left: .6rem;
+  right: .6rem;
+  top: -1px;
+  height: 1px;
+  background: linear-gradient(90deg, var(--mint-700), transparent 30%, transparent 70%, var(--mint-700));
+}
+.room-bar__left { display: flex; align-items: center; gap: .22rem; min-width: 0; }
+.room-bar__label { display: flex; flex-direction: column; font-size: .17rem; font-weight: 700; color: var(--text-md); line-height: 1.35; }
+.room-bar__center { display: flex; flex-direction: column; align-items: center; gap: .06rem; }
+.room-bar__right { justify-self: end; display: flex; align-items: center; gap: .16rem; }
+.room-bar__status { font-size: .15rem; }
+.room-bar__status .icon { width: .18rem; height: .18rem; margin-right: .05rem; vertical-align: -.03rem; }
+
+.dpick { display: flex; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .3); }
+.dpick__opt {
+  --d-color: var(--amber);
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: .06rem;
+  height: .54rem;
+  padding: 0 .2rem;
+  border: 0;
+  border-right: 1px solid var(--line);
+  background: transparent;
+  color: var(--text-lo);
+  font-size: .18rem;
+  font-weight: 700;
+  letter-spacing: .08em;
+  transition: color var(--t-fast), background-color var(--t-med), box-shadow var(--t-med);
+}
+.dpick__opt:last-child { border-right: 0; }
+.dpick__opt .icon { width: .2rem; height: .2rem; color: var(--d-color); opacity: .55; transition: opacity var(--t-fast); }
+.dpick__opt:hover:not(:disabled) { color: var(--text-hi); background: rgba(255, 255, 255, .03); }
+.dpick__opt:hover:not(:disabled) .icon { opacity: 1; }
+.dpick__opt:disabled { cursor: progress; }
+.dpick__opt.is-active {
+  color: var(--d-color);
+  background: transparent; background: color-mix(in srgb, var(--d-color) 17%, transparent);
+  box-shadow: inset 0 -3px 0 var(--d-color);
+}
+.dpick__opt.is-active .icon { opacity: 1; filter: drop-shadow(0 0 5px var(--d-color)); }
+.dpick--ro { border: 0; background: none; gap: .18rem; align-items: center; font-size: .14rem; }
+
+.ready-count[hidden] { display: none; }
+.ready-count { display: flex; align-items: baseline; gap: .06rem; font-size: .16rem; }
+.ready-count b { font-size: .36rem; line-height: 1; color: var(--mint-400); text-shadow: 0 0 .14rem rgba(23, 249, 183, .45); }
+.ready-count .t-dim { font-size: .22rem; }
+.ready-count__icons { display: flex; gap: .02rem; margin-left: .12rem; align-self: center; }
+.ready-count__icons .icon { width: .28rem; height: .28rem; color: var(--line-3); transition: color var(--t-med); }
+.ready-count__icons .icon.is-on { color: var(--mint-400); filter: drop-shadow(0 0 4px var(--mint-glow)); }
+
+.room-bar .btn--xl { min-width: 3.2rem; letter-spacing: .2em; }

public/css/screens/title.css

@@ -0,0 +1,253 @@
+/* ==========================================================================================
+   screens/title.css — title screen: radar + ridgeline backdrop, dot-matrix emblem, big title,
+   nickname console. Pure CSS/SVG art; an optional backdrop image fades in underneath.
+   ========================================================================================== */
+
+.title-screen { align-items: center; justify-content: center; }
+
+/* ---- backdrop ----------------------------------------------------------------------------------- */
+.title-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
+.title-bg__art {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  object-position: center 30%;
+  filter: saturate(.8) brightness(.9);
+  transition: opacity 600ms ease;
+}
+.title-bg.has-art .title-bg__art { opacity: .8; }
+/* The real backdrop already carries a radar + target point; keep only the sweep over it. */
+.title-bg.has-art .title-bg__target { display: none; }
+.title-bg.has-art .title-bg__radar { opacity: .35; }
+.title-bg__ridge-art {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -.1rem;
+  height: 3.3rem;
+  background-repeat: repeat-x;
+  background-position: center bottom;
+  background-size: auto 100%;
+  opacity: 0;
+  transition: opacity 600ms ease;
+}
+.title-bg.has-ridges .title-bg__ridge-art { opacity: 1; }
+.title-bg__ridges { animation: fade-in 600ms ease backwards; }
+@keyframes fade-in { from { opacity: 0; } }
+.title-bg__glow {
+  position: absolute;
+  left: -10%;
+  right: -10%;
+  bottom: 0;
+  height: 6rem;
+  background:
+    radial-gradient(48% 42% at 50% 78%, rgba(23, 249, 183, .40), rgba(23, 249, 183, .08) 62%, transparent 76%),
+    radial-gradient(26% 26% at 50% 80%, rgba(120, 255, 215, .30), transparent 70%);
+  filter: blur(6px);
+  animation: glow-breathe 7s ease-in-out infinite;
+}
+@keyframes glow-breathe { 50% { opacity: .78; } }
+
+.title-bg__radar {
+  position: absolute;
+  left: 17%;
+  top: 40%;
+  width: 5.6rem;
+  height: 5.6rem;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background:
+    radial-gradient(circle, transparent 0 .05rem, rgba(78, 216, 175, .5) .05rem .065rem, transparent .065rem),
+    repeating-radial-gradient(circle, transparent 0 .69rem, rgba(78, 216, 175, .16) .69rem .7rem),
+    linear-gradient(rgba(78, 216, 175, .12), rgba(78, 216, 175, .12)) center / 100% 1px no-repeat,
+    linear-gradient(rgba(78, 216, 175, .12), rgba(78, 216, 175, .12)) center / 1px 100% no-repeat;
+  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 71%);
+  mask-image: radial-gradient(circle, #000 55%, transparent 71%);
+  opacity: .8;
+}
+.title-bg__sweep {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(from 0deg, rgba(23, 249, 183, .28), rgba(23, 249, 183, 0) 22%, transparent 100%);
+  animation: radar-sweep 6s linear infinite;
+}
+@keyframes radar-sweep { to { transform: rotate(360deg); } }
+
+.title-bg__target {
+  position: absolute;
+  right: 12%;
+  top: 22%;
+  width: 1.3rem;
+  height: 1.3rem;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle, rgba(246, 163, 41, .9) 0 .06rem, transparent .065rem),
+    radial-gradient(circle, transparent 0 .2rem, rgba(246, 163, 41, .5) .2rem .215rem, transparent .215rem),
+    radial-gradient(circle, transparent 0 .5rem, rgba(246, 163, 41, .22) .5rem .51rem, transparent .51rem),
+    radial-gradient(circle, rgba(246, 163, 41, .18), transparent 70%);
+  animation: target-pulse 3.2s ease-in-out infinite;
+}
+.title-bg__target::after {
+  content: 'TARGET POINT';
+  position: absolute;
+  left: 110%;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: .02rem .08rem;
+  border: 1px solid rgba(246, 163, 41, .35);
+  font-family: var(--font-display);
+  font-size: .1rem;
+  letter-spacing: .2em;
+  color: rgba(246, 163, 41, .7);
+  white-space: nowrap;
+}
+@keyframes target-pulse { 50% { transform: scale(1.06); opacity: .75; } }
+
+.title-bg__ridges { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 40%; }
+.title-bg__ridges .ridge { stroke-width: 1.5; vector-effect: non-scaling-stroke; }
+.title-bg__ridges .ridge--far { opacity: .95; }
+.title-bg__haze {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(180deg, rgba(12, 15, 14, .6) 0%, transparent 25%, transparent 70%, rgba(6, 8, 7, .7) 100%),
+    radial-gradient(46% 42% at 50% 44%, rgba(10, 13, 12, .82), rgba(10, 13, 12, .4) 60%, transparent 80%);
+}
+
+/* ---- corners ------------------------------------------------------------------------------------- */
+.title-corner { position: absolute; z-index: 2; display: flex; align-items: flex-start; gap: .12rem; line-height: 1.7; }
+.title-corner--tl { left: .44rem; top: .38rem; }
+.title-corner--tr { right: .44rem; top: .38rem; text-align: right; }
+.title-corner__mark {
+  width: .32rem;
+  height: .32rem;
+  margin-top: .02rem;
+  border: 1px solid var(--mint-700);
+  background:
+    linear-gradient(var(--mint-500), var(--mint-500)) center / 40% 2px no-repeat,
+    linear-gradient(var(--mint-500), var(--mint-500)) center / 2px 40% no-repeat;
+  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
+}
+
+/* ---- centre column ------------------------------------------------------------------------------- */
+.title-main {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: -.3rem;
+}
+
+.emblem { position: relative; display: flex; align-items: center; gap: .26rem; margin-bottom: .26rem; animation: rise-in 600ms var(--ease-out) backwards; }
+.emblem__svg { width: 1.3rem; height: 1.4rem; overflow: visible; filter: drop-shadow(0 0 .12rem rgba(210, 255, 240, .25)); }
+.emblem__svg circle { fill: #dfe6e2; animation: dot-twinkle 4.8s ease-in-out infinite; }
+.emblem__svg circle.d1 { animation-delay: -.7s; }
+.emblem__svg circle.d2 { animation-delay: -1.4s; }
+.emblem__svg circle.d3 { animation-delay: -2.1s; }
+.emblem__svg circle.d4 { animation-delay: -2.8s; }
+.emblem__svg circle.d5 { animation-delay: -3.5s; }
+.emblem__svg circle.d6 { animation-delay: -4.2s; }
+.emblem__svg circle.is-accent { fill: var(--mint-glow); filter: drop-shadow(0 0 .04rem var(--mint-glow)); animation: none; }
+@keyframes dot-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
+.emblem__bracket { width: .16rem; height: 1.7rem; border: 2px solid rgba(223, 230, 226, .45); }
+.emblem__bracket--l { border-right: 0; }
+.emblem__bracket--r { border-left: 0; }
+
+.title-en {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: .02rem;
+  font-family: var(--font-display);
+  text-transform: uppercase;
+  line-height: 1;
+  animation: rise-in 600ms 80ms var(--ease-out) backwards;
+}
+.title-en__a { font-size: .34rem; font-weight: 500; letter-spacing: .3em; padding-left: .3em; color: #cdd6d1; }
+.title-en__b {
+  font-size: .38rem;
+  font-weight: 700;
+  letter-spacing: .34em;
+  padding-left: .34em;
+  color: var(--mint-500);
+  text-shadow: 0 0 .18rem rgba(23, 249, 183, .45);
+}
+.title-cn {
+  margin-top: .14rem;
+  font-size: 1.02rem;
+  font-weight: 900;
+  line-height: 1.12;
+  letter-spacing: .06em;
+  color: #f4f6f5;
+  text-shadow: 0 .04rem .2rem rgba(0, 0, 0, .7);
+  animation: rise-in 600ms 140ms var(--ease-out) backwards;
+}
+.title-cn__colon { color: #f4f6f5; }
+.title-cn em { font-style: normal; color: var(--mint-500); text-shadow: 0 0 .26rem rgba(23, 249, 183, .45); }
+.title-tag {
+  margin-top: .12rem;
+  font-size: .19rem;
+  color: var(--text-lo);
+  letter-spacing: .1em;
+  animation: rise-in 600ms 200ms var(--ease-out) backwards;
+}
+@keyframes rise-in { from { opacity: 0; transform: translateY(.14rem); } }
+
+.title-login {
+  --bk-c: var(--mint-500);
+  position: relative;
+  width: 4.9rem;
+  margin-top: .42rem;
+  display: flex;
+  flex-direction: column;
+  gap: .16rem;
+  padding: .24rem .28rem .2rem;
+  background: linear-gradient(180deg, rgba(20, 25, 23, .82), rgba(10, 13, 12, .88));
+  border: 1px solid var(--line-2);
+  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .5), 0 0 .5rem rgba(23, 249, 183, .06);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  animation: rise-in 600ms 260ms var(--ease-out) backwards;
+}
+.title-login::before {
+  content: '';
+  position: absolute;
+  left: -1px;
+  right: -1px;
+  top: -1px;
+  height: 2px;
+  background: linear-gradient(90deg, var(--mint-500), transparent 60%);
+}
+.title-login .btn--xl { letter-spacing: .6em; padding-left: calc(.48rem + .3em); }
+.title-invite {
+  display: flex;
+  align-items: center;
+  gap: .08rem;
+  padding: .08rem .12rem;
+  background: rgba(246, 163, 41, .08);
+  border: 1px solid rgba(246, 163, 41, .35);
+  color: var(--amber);
+  font-size: .16rem;
+}
+.title-invite .icon { width: .2rem; height: .2rem; }
+.title-invite b { font-size: .2rem; letter-spacing: .2em; color: #ffd08a; }
+.title-conn { display: flex; align-items: center; justify-content: center; gap: .1rem; min-height: .32rem; font-size: .14rem; color: var(--text-lo); }
+.title-conn .ping { height: .26rem; font-size: .15rem; }
+
+.title-foot {
+  position: absolute;
+  z-index: 2;
+  left: .44rem;
+  right: .44rem;
+  bottom: .3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  font-size: .13rem;
+  color: var(--text-dim);
+}