/* ==========================================================================================
   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; top: 0; left: 0; right: 0; bottom: 0; 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; top: 0; left: 0; right: 0; bottom: 0; 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);
}
/* every layer but the background stacks above it. :where() keeps this at the specificity of the old `.lo > *` (one
   class), so the rules after it still win where they did, and it never matches .lo__bg: as `.lo > *` (same specificity,
   later rule) it beat the layer's `position: absolute`, which left a 0-px tall flex item that never drew (PR #14). */
.lo > :where(:not(.lo__bg)) { position: relative; }

/* ---- top bar ---------------------------------------------------------------------------------------------------- */
/* The tabs stay centred while both sides fit in equal halves beside them; a wider side keeps its own width and shifts
   the tabs instead (0.2.0: three tabs and the co-op countdown ran the right column into the tabs on phones and in
   English), and only when nothing else is left does the tab strip scroll (.lo-tabs). */
.lo-top {
  flex: none; display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 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; min-width: 0; }
.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; }
/* its caption breaks at its spaces (Loadout / Deadline) rather than widening the column; 调配截止 stays one line */
.lo-deadline .countdown__label { font-size: max(.11rem, 8px); width: min-content; word-break: keep-all; text-align: right; }
.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); }

/* the 口径 switches (DESIGN §23.41/§23.42): 商店品阶 / 干员练度 / 部署位 — under the lock note, one row each */
.lo-variants {
  flex: none; display: grid; gap: .02rem; padding: .04rem .36rem .05rem;
  font-size: max(.15rem, 10px); color: var(--text-lo);
  background: linear-gradient(90deg, rgba(47, 58, 53, .5), transparent 70%);
  border-bottom: 1px solid rgba(47, 58, 53, .6);
}
.lo-variants__head { display: flex; align-items: center; gap: .08rem; min-width: 0; }
.lo-variants__head b { color: var(--text-hi); font-weight: 500; }
.lo-variant { display: flex; align-items: center; gap: .12rem; }
.lo-variant__text { display: flex; align-items: center; gap: .08rem; min-width: 0; flex: 1; }
.lo-variant__text b { color: var(--text-hi); font-weight: 500; }
.lo-variants .set-toggle { grid-column: auto; justify-self: auto; flex: none; }
.lo-variants.is-locked .set-toggle { opacity: .55; cursor: not-allowed; }
/* the three rows sit close together (one line each), but the touch layer gives every `.set-toggle` an invisible 44 px hit
   area (devices.css) — three of those overlap, and the LAST switch would swallow taps meant for the row above. On coarse
   pointers each row therefore grows to the tap target, so the switches stay individually hittable. */
.sp-coarse .lo-variant { min-height: var(--tap-min); }

.lo-loading { flex: 1; display: flex; align-items: center; justify-content: center; gap: .14rem; color: var(--text-lo); font-size: max(.18rem, 12px); }
/* the tab's game data did not load (GitHub #173): said in place of the roster */
.lo-missing { flex-direction: column; gap: .1rem; padding: .3rem; text-align: center; color: var(--amber); }
.lo-missing .icon { width: max(.32rem, 22px); height: max(.32rem, 22px); }
.lo-missing p { margin: 0; max-width: 9rem; color: var(--text-lo); font-size: max(.16rem, 11px); line-height: 1.6; text-wrap: balance; }

/* ---- 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; }

/* ---- card grid (the 干员调配 roster's tiled sibling) -------------------------------------------------------------
   The 装备总览 (screens/equipment.js) and 盟约与策略总览 (screens/alliances.js) codexes are read-only overlays built on
   this screen's skeleton: each draws its goods / bonds as a tile in `.lo-grid` of class `.lo-card`. Those two files
   (and the `.lo-grid` they rely on) live only in the 同人内容包 mod, so every rule they borrow must exist here in the
   base stylesheet — an undefined `.lo-grid` leaves the container `display: block`, which stacks every tile in one
   column, and an undefined `--cols` collapses each `.lo-card` to its 1-column fallback (a ~76px square). */
.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.5rem, 94px), 1fr));
  align-content: start; gap: .09rem; padding: 0 .06rem .2rem 0;
  scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
}
/* a tile is one card of the 干员调配 row style, re-flowed into a square: art on top, name, then the meta line. */
.lo .lo-grid .lo-card {
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto;
  justify-items: center; gap: .05rem; padding: .08rem .08rem .1rem;
}
.lo .lo-grid .lo-card__art { width: 100%; aspect-ratio: 1 / 1; height: auto; }
.lo .lo-grid .lo-card__name { width: 100%; text-align: center; }
.lo .lo-grid .lo-card__kit { width: 100%; justify-content: center; }
/* the 干员调配 row's art box and tier chip are sized by `--art` / `--q`; the card sets both, the grid only the chip. */
.lo-grid .lo-card { --art: max(.52rem, 40px); --q: max(.4rem, 32px); }

/* ---- 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: one list, one row per operator (0.2.2) ------------------------------------------------------------------------ */
/* The quick choices of PR #301 (by @farridge) as ONE list instead of three columns of cards (the owner's decision of
   2026-10-08: 「三个竖排有点乱影响观感」): every row has the same four columns — the operator (portrait, name, bonds), the
   skills, the elite's modules, 潜能 / 练度 — aligned under a sticky head row, so the eye runs down a column. Sizes: --q a
   quick button (a skill / module), --art the portrait; a coarse pointer gets 40 px targets. */
.lo-list {
  --q: max(.4rem, 32px); --qg: max(.05rem, 4px); --art: max(.52rem, 40px);
  --cols: minmax(max(2.2rem, 110px), max(3.2rem, 260px)) calc(3 * var(--q) + 2 * var(--qg)) calc(4 * var(--q) + 3 * var(--qg)) max(2.2rem, 160px);
  flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 0 .06rem .2rem 0; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
}
.sp-coarse .lo-list { --q: max(.44rem, 40px); }
.lo-list__head, .lo .lo-card { display: grid; grid-template-columns: var(--cols); justify-content: start; align-items: center; column-gap: max(.12rem, 8px); }
/* (the head has the rows' box — the same borders, transparent, and padding — so its columns are the rows' to the pixel) */
.lo-list__head {
  position: sticky; top: 0; z-index: 2; padding: .05rem .1rem .05rem .07rem; border: 1px solid transparent; border-left-width: 3px;
  font-size: max(.12rem, 9px); font-weight: 700; letter-spacing: .12em; color: var(--text-dim);
  background: linear-gradient(180deg, #0d1110 70%, rgba(13, 17, 16, .85)); box-shadow: inset 0 -1px 0 var(--line);
}
.lo-list__h small { margin-left: .05rem; font-weight: 400; letter-spacing: .04em; color: var(--gold-2); opacity: .8; }
.lo-list__rows { display: flex; flex-direction: column; gap: max(.04rem, 3px); padding-top: max(.05rem, 4px); }
.lo-empty { padding: .4rem; text-align: center; font-size: max(.16rem, 11px); }

.lo .lo-card {
  --tc: var(--tier-1);
  position: relative; min-width: 0; padding: max(.05rem, 4px) .1rem max(.05rem, 4px) .07rem;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--line); border-left: 3px solid var(--tc);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.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 .lo-card:hover { background: rgba(255, 255, 255, .045); border-color: var(--line-3); border-left-color: var(--tc); }
.lo .lo-card.is-sel { background: linear-gradient(90deg, rgba(78, 216, 175, .1), rgba(78, 216, 175, .02) 60%); border-color: var(--mint-700); border-left-color: var(--tc); box-shadow: 0 0 0 1px var(--mint-500) inset; }
.lo-card button:focus-visible, .lo-card select:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 1px; }
.lo-card__pick { display: flex; align-items: center; gap: max(.1rem, 6px); min-width: 0; padding: 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
.lo-card__art { position: relative; flex: none; width: var(--art); height: var(--art); overflow: hidden; background: #1b201e; border: 1px solid var(--line-2); }
.lo-card__art > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lo-card__glyph { display: grid; place-items: center; width: 100%; height: 100%; font-size: max(.24rem, 16px); font-weight: 900; color: var(--text-dim); }
.lo-card__tier { position: absolute; left: 1px; top: 1px; z-index: 1; transform-origin: 0 0; transform: scale(.8); }
.lo-card__id { display: flex; flex-direction: column; gap: max(.03rem, 2px); min-width: 0; }
.lo-card__name { font-size: max(.17rem, 12px); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-card__bonds { display: flex; flex-wrap: wrap; gap: max(.04rem, 3px); min-height: max(.16rem, 12px); }
.lo-card__bond, .lo-card__bonds .lo-bond__dot { width: max(.18rem, 13px); height: max(.18rem, 13px); object-fit: contain; }
.lo-card__flag { position: absolute; right: 0; top: 0; z-index: 1; width: max(.16rem, 10px); height: max(.16rem, 10px); background: linear-gradient(225deg, var(--mint-400) 50%, transparent 50%); pointer-events: none; }
/* 0.2.0 补位: a chess marked 未持有 on the 干员持有 tab — its stand-in fights with a fixed skill and no 潜能 / 练度; the choices
   here apply once it is owned again */
.lo-card__sub { align-self: flex-start; padding: 0 .04rem; font-size: max(.11rem, 8px); font-weight: 700; line-height: 1.4; color: var(--ice-900); background: var(--ice); }
.lo .lo-card.is-standin .lo-card__skills, .lo .lo-card.is-standin .lo-card__mods, .lo .lo-card.is-standin .lo-cult { opacity: .55; }
.lo-locknote--standin { color: var(--ice); }

.lo-card__skills, .lo-card__mods { display: flex; align-items: center; gap: var(--qg); min-width: 0; }
.lo-card__mods { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.lo-q {
  position: relative; flex: none; display: grid; place-items: center; width: var(--q); height: var(--q); padding: 0;
  font: inherit; color: var(--text-lo); background: none; border: 0; cursor: pointer; touch-action: manipulation;
}
.lo-q--empty { border: 1px dashed rgba(255, 255, 255, .07); cursor: default; }
.lo-q:not(.is-on):not(.lo-q--empty) { opacity: .62; }
.lo-q:not(.is-on):not(.lo-q--empty):hover { opacity: 1; }
.lo-q__type { position: absolute; left: 0; bottom: 0; padding: 0 2px; font-size: max(.11rem, 8px); line-height: 1.3; color: var(--text-hi); background: rgba(0, 0, 0, .7); pointer-events: none; }
.lo-q--mod.is-on .lo-mglyph { border-color: var(--gold-2); box-shadow: 0 0 .08rem rgba(255, 198, 0, .35); }

/* 潜能 / 练度 (screens/cultivation.js): two compact selects side by side in the row's last column; at the defaults (潜能 6,
   精英2 Lv.60 — the same on every row) they stay quiet, a changed one is mint */
.lo-cult { display: flex; align-items: center; gap: max(.04rem, 3px); min-width: 0; }
.lo .lo-cult .lo-select { min-height: 0; height: max(.32rem, 22px); padding-left: 0; border-color: transparent; background: rgba(255, 255, 255, .03); }
.lo .lo-cult .lo-select:hover, .lo .lo-cult .lo-select:focus-within { border-color: var(--line-3); }
.lo .lo-cult .lo-select select { width: 100%; min-width: 0; padding: 0 max(.2rem, 14px) 0 max(.06rem, 4px); font-size: max(.14rem, 10px); color: var(--text-lo); }
.lo-cult__pot { flex: 0 0 auto; }
.lo-cult__tier { flex: 1 1 auto; min-width: 0; }
.lo .lo-cult .lo-select.is-off { border-color: var(--mint-700); background: rgba(78, 216, 175, .08); }
.lo .lo-cult .lo-select.is-off select { color: var(--mint-400); font-weight: 700; }
.sp-coarse .lo .lo-cult .lo-select { height: max(.32rem, 28px); }

/* the detail's 潜能 / 练度 section */
.lo-sec--cult { padding: .08rem .1rem .1rem; margin-bottom: .14rem; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); border-left: 3px solid var(--mint-500); }
.lo-sec--cult .lo-sec__head .lo-badge { margin-left: auto; }
.lo-cult__row { display: grid; grid-template-columns: max(.5rem, 30px) minmax(0, 1fr); align-items: center; gap: .08rem; }
.lo-cult__k { font-size: max(.13rem, 10px); color: var(--text-dim); letter-spacing: .08em; }
.lo .lo-cult__row .lo-seg { margin-left: 0; flex-wrap: wrap; justify-self: start; }
.lo-seg--pot button { min-width: max(.36rem, 26px); font-family: var(--font-num); }
.lo-seg--tier button { padding: 0 .1rem; }
.lo-cult__eff { margin: .02rem 0 0; font-size: max(.14rem, 10px); line-height: 1.5; color: var(--text-md); }
.lo-cult__eff b { color: var(--mint-400); margin-right: .04rem; }
.lo-cult__note { margin: 0; font-size: max(.12rem, 9px); line-height: 1.5; color: var(--text-dim); }
.lo-sec--cult.is-moot .lo-cult__row, .lo-sec--cult.is-moot .lo-cult__eff { opacity: .55; }
.lo-sec--cult.is-moot .lo-cult__note { color: var(--ice); }

/* ---- 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--q { width: 86%; height: 86%; }
.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; }
/* the selected skill's frame (a 30 × 30 sprite, a 3 px ring to its edges) drawn .05rem outside the icon on every side, square:
   theme.css `img { max-width: 100% }` clamped its width to the icon's while its height grew by .1rem, and `.lo-sicon img`
   (more specific) made it `cover` — a tall, left-shifted frame with clipped side lines (GitHub #398, PR #399) */
.lo-sicon .lo-sicon__outline { position: absolute; top: -.05rem; left: -.05rem; right: -.05rem; bottom: -.05rem; inset: -.05rem; width: calc(100% + .1rem) !important; height: calc(100% + .1rem) !important; max-width: none; object-fit: fill; pointer-events: none; }
.lo-sicon__ring { position: absolute; top: -.05rem; left: -.05rem; right: -.05rem; bottom: -.05rem; 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--q { width: 86%; height: 86%; }
.lo-mglyph__slash { position: absolute; top: 22%; left: 22%; right: 22%; bottom: 22%; 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-dtabs {
  flex: none; display: flex; align-items: stretch;
  background: rgba(0, 0, 0, .45); border-bottom: 1px solid var(--line-2);
}
.lo-dtab {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .05rem;
  height: max(.42rem, 30px); padding: 0 .06rem;
  font: inherit; font-size: max(.15rem, 11px); font-weight: 700; color: var(--text-lo);
  background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  touch-action: manipulation;
}
.lo-dtab:hover { color: var(--text-hi); background: rgba(255, 255, 255, .03); }
.lo-dtab.is-on {
  color: var(--mint-400); border-bottom-color: var(--mint-400);
  background: linear-gradient(180deg, transparent, rgba(78, 216, 175, .09));
}
.lo-dtab__en { font-family: var(--font-num); font-size: max(.11rem, 8px); color: var(--text-dim); letter-spacing: .06em; }
.lo-dtab.is-on .lo-dtab__en { color: rgba(78, 216, 175, .7); }

.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-garrisons { margin-bottom: .18rem; }
.lo-garrisons .dgarrison__k { font-size: max(.14rem, 11px); }
.lo-garrisons .dgarrison__type { font-size: max(.12rem, 10px); }
.lo-garrisons .dgarrison__icon { width: max(.18rem, 14px); height: max(.18rem, 14px); }
.lo-garrisons .dgarrison__text { font-size: max(.15rem, 11px); }
.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; }
  /* 特质 (garrison) above the 技能 list: the in-match card's gold block (screens/game-panels.css .dgarrison), sized for
     this panel (everything else here is responsive) */
  .lo-sec .dgarrison { margin-top: .02rem; }
  .lo-sec .dgarrison__k, .lo-sec .dgarrison__type { font-size: max(.13rem, 9px); }
  .lo-sec .dgarrison__text { font-size: max(.15rem, 10px); }
.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); }

/* 局内数值 (the chosen variant's stats, 攻击范围, 特性 and 天赋 — GitHub issue #64): the detail card's own block
   (ui/detailPanel.js chessStatsBlock: .dstats / .dstat / .drange / .rgrid / .rgrid-all from game-panels.css, drawn there in
   board-sized units) at this screen's reading sizes — a px floor on every text size (1 rem is 40 px on phones), the range box
   dropping under the numbers when the column is too narrow for both */
.lo-sec--stats .dstats-wrap { flex-wrap: wrap; gap: .1rem; }
.lo-sec--stats .dstats-wrap > .dstats { flex: 1 1 max(3.2rem, 190px); }
.lo-sec--stats .dstat { padding: .05rem .08rem; }
.lo-sec--stats .dstat__k { font-size: max(.13rem, 9px); }
.lo-sec--stats .dstat__v { font-size: max(.2rem, 12px); }
.lo-sec--stats .drange { min-width: max(1.1rem, 56px); }
.lo-sec--stats .rgrid { --rg: max(.14rem, 7px); } /* (a grid wider than the box keeps its inline, shrunk --rg) */
.lo-sec--stats .rgrid-all { font-size: max(.16rem, 11px); }
.lo-minfo--kit { margin-top: 0; border-left-color: var(--mint-500); }
.lo-stats__cap { margin: 0; font-size: max(.13rem, 9px); line-height: 1.5; color: var(--text-dim); }
/* 局内数值 顶部一行：精英化程度 / 干员等级 / 技能等级（跟当前的 普通/精锐 切换） */
.lo-stats__train { display: flex; flex-wrap: wrap; align-items: baseline; gap: .04rem .16rem; margin: 0 0 .06rem; font-size: max(.15rem, 10px); }
.lo-stats__train-i { display: inline-flex; align-items: baseline; gap: .05rem; }
.lo-stats__train-k { font-size: max(.12rem, 9px); letter-spacing: .06em; color: var(--text-dim); }
.lo-stats__train b { font-weight: 800; color: var(--text-hi); }
.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; }

/* ---- tabs: 干员调配 / 干员持有 (0.2.0 补位) ---------------------------------------------------------------------------- */
.lo-tabs { display: flex; align-items: stretch; gap: .04rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lo-tab {
  display: inline-flex; align-items: center; gap: .08rem; padding: .02rem .16rem; font: inherit; font-size: max(.24rem, 13px); font-weight: 900;
  letter-spacing: .12em; line-height: 1.2; color: var(--text-lo); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  touch-action: manipulation; white-space: nowrap;
}
.lo-tab .lo-top__icon { width: max(.24rem, 14px); height: max(.24rem, 14px); }
.lo-tab:hover { color: var(--text-hi); }
.lo-tab.is-on { color: var(--text-hi); border-bottom-color: var(--mint-500); }
.lo-tab__n { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .3em; font-size: .62em; font-weight: 700; letter-spacing: 0; color: var(--ice-900); background: var(--ice); border-radius: 1em; }

/* ---- 干员持有 (screens/ownership.js): the NORMAL chess by tier, each operator → its stand-in, a 持有 switch -------------- */
.own { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .12rem; padding: .16rem .3rem .2rem; }
.own__bar { flex: none; display: flex; align-items: center; gap: .2rem; }
.own__lead { flex: 1; margin: 0; font-size: max(.15rem, 10px); line-height: 1.5; color: var(--text-md); }
.own__lead b { color: var(--ice); font-weight: 700; }
.own__list { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .18rem; padding: 0 .06rem .2rem 0;
  scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
.own-tier__head { display: flex; align-items: center; gap: .08rem; margin: 0 0 .08rem; font-size: max(.17rem, 12px); font-weight: 700; color: var(--text-md); letter-spacing: .06em; }
.own-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(4.4rem, 270px), 1fr)); gap: .08rem; }
.own-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: .08rem; min-width: 0;
  padding: .07rem .1rem .07rem .07rem; font: inherit; color: var(--text-hi); text-align: left; cursor: pointer; touch-action: manipulation;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-left: 3px solid var(--tc, var(--line-3));
  transition: background var(--t-fast), border-color var(--t-fast);
}
.own-card--t1 { --tc: var(--tier-1); } .own-card--t2 { --tc: var(--tier-2); } .own-card--t3 { --tc: var(--tier-3); }
.own-card--t4 { --tc: var(--tier-4); } .own-card--t5 { --tc: var(--tier-5); } .own-card--t6 { --tc: var(--tier-6); }
.own-card:hover { background: rgba(255, 255, 255, .06); border-color: var(--line-3); }
.own-card__op, .own-card__sub { display: flex; align-items: center; gap: .07rem; min-width: 0; }
.own-card__ava { flex: none; display: grid; place-items: center; width: max(.46rem, 28px); height: max(.46rem, 28px); overflow: hidden; background: #0a0d0c; border: 1px solid var(--line-2); }
.own-card__ava img { width: 100%; height: 100%; object-fit: cover; }
.own-card__ava b { font-size: max(.18rem, 12px); color: var(--text-lo); }
.own-card__txt { display: flex; flex-direction: column; min-width: 0; }
.own-card__name { font-size: max(.16rem, 11px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.own-card__txt small { font-size: max(.12rem, 9px); color: var(--text-lo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.own-card__arrow .icon { width: max(.18rem, 12px); height: max(.18rem, 12px); color: var(--text-dim); }
.own-card__sub { opacity: .55; }
.own-card__state { display: inline-flex; flex-direction: column; align-items: center; gap: .03rem; min-width: max(.5rem, 30px); font-size: max(.12rem, 9px); font-weight: 700; color: var(--mint-400); white-space: nowrap; }
.own-switch { position: relative; display: inline-block; width: max(.36rem, 24px); height: max(.2rem, 13px); border-radius: 1em; background: var(--mint-700); }
.own-switch > i { position: absolute; top: 2px; right: 2px; width: calc(max(.2rem, 13px) - 4px); height: calc(max(.2rem, 13px) - 4px); border-radius: 50%; background: #fff; transition: right var(--t-fast), left var(--t-fast); }
/* 未持有: the operator greys out, the stand-in (who is deployed) lights up */
.own-card.is-off { background: rgba(159, 212, 255, .07); border-color: rgba(159, 212, 255, .35); }
.own-card.is-off .own-card__op { opacity: .5; filter: grayscale(.8); }
.own-card.is-off .own-card__sub { opacity: 1; }
.own-card.is-off .own-card__sub .own-card__ava { border-color: var(--ice); }
.own-card.is-off .own-card__state { color: var(--ice); }
.own-card.is-off .own-switch { background: var(--bg-4); }
.own-card.is-off .own-switch > i { right: auto; left: 2px; background: var(--ice); }
@media (max-width: 760px) {
  .own { padding: .1rem .16rem .16rem; }
  .own__lead { display: none; }
}

/* ---- 自选编队 (screens/diy.js): four DIY slots by tier, the slot picker (operator list + skill / module) --------------- */
.diy { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .12rem; padding: .16rem .3rem .2rem; }
.diy__body { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .18rem; padding: 0 .06rem .2rem 0;
  scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
.diy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(5.2rem, 300px), 1fr)); gap: .1rem; }
.diy-slot {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .1rem; align-items: start; min-width: 0;
  padding: .08rem; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-left: 3px solid var(--tc, var(--line-3));
}
.diy-slot--t5 { --tc: var(--tier-5); } .diy-slot--t6 { --tc: var(--tier-6); }
.diy-slot.is-empty { display: flex; flex-direction: column; padding: 0; border-style: dashed; border-left-style: solid; }
.diy-slot__fill {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem; width: 100%; min-height: max(1.3rem, 84px);
  padding: .1rem; font: inherit; color: var(--text-md); background: none; border: 0; cursor: pointer; touch-action: manipulation;
}
.diy-slot__fill:hover { background: rgba(255, 255, 255, .05); color: var(--text-hi); }
.diy-slot__fill b { font-size: max(.16rem, 11px); }
.diy-slot__fill small { font-size: max(.12rem, 9px); color: var(--text-lo); }
.diy-slot__plus { display: grid; place-items: center; width: max(.4rem, 26px); height: max(.4rem, 26px); border: 1px solid var(--line-3); border-radius: 50%; }
.diy-slot__plus .icon { width: 60%; height: 60%; }
.diy-slot__art { display: grid; place-items: center; width: max(.9rem, 56px); height: max(1.3rem, 84px); overflow: hidden; background: #0a0d0c; border: 1px solid var(--line-2); }
.diy-slot__art img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.diy-slot__art b { font-size: max(.3rem, 18px); color: var(--text-lo); }
.diy-slot__body { display: flex; flex-direction: column; gap: .03rem; min-width: 0; }
.diy-slot__head { display: flex; align-items: center; gap: .05rem; }
.diy-slot__label { font-size: max(.12rem, 9px); color: var(--text-lo); letter-spacing: .06em; }
.diy-slot__name { font-size: max(.17rem, 12px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diy-slot__class { font-size: max(.12rem, 9px); color: var(--text-lo); }
.diy-slot__kit { display: flex; align-items: center; gap: .05rem; min-width: 0; font-size: max(.13rem, 9px); color: var(--text-md); }
.diy-slot__kit > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diy-slot__sicon, .diy-slot__micon { flex: none; display: inline-grid; place-items: center; width: max(.24rem, 16px); height: max(.24rem, 16px); object-fit: contain; font-size: .8em; color: var(--text-lo); }
.diy-slot__micon--none { border: 1px solid var(--line-2); }
.diy-slot__acts { display: flex; flex-direction: column; gap: .04rem; }
/* 0.2.2: an owned pick's 潜能 / 练度 (screens/cultivation.js) — a prototype has neither (a dim line instead) */
.diy-slot__cult { display: block; margin-top: .03rem; font-size: max(.12rem, 9px); }
.diy-slot__cult .lo-cult { max-width: max(2.6rem, 200px); }
.diy-slot__bad { display: flex; align-items: center; gap: .04rem; margin: .02rem 0 0; font-size: max(.12rem, 9px); color: var(--amber); }
.diy-slot.is-bad { border-color: rgba(255, 196, 0, .45); }
.diy-tag { display: inline-flex; align-items: center; height: 1.5em; padding: 0 .4em; font-size: max(.11rem, 8px); font-weight: 700; border-radius: 1em; white-space: nowrap; }
.diy-tag--proto { color: var(--ice-900); background: var(--ice); }
.diy-tag--own { color: var(--text-on-mint); background: var(--mint-500); }
.diy-bonds { display: flex; flex-wrap: wrap; gap: .03rem .06rem; }
.diy-bond { display: inline-flex; align-items: center; gap: .03rem; font-size: max(.12rem, 9px); color: var(--text-md); }
.diy-bond .bglyph, .diy-bond img { width: max(.16rem, 11px); height: max(.16rem, 11px); }
/* the picker covers the tab: the list of the slot's tier on the left, the chosen operator's skill / module on the right */
.diy-pick { position: absolute; top: 0; left: 0; right: 0; bottom: 0; inset: 0; z-index: 3; display: flex; flex-direction: column; gap: .08rem; padding: .12rem .3rem .14rem; background: var(--bg-1, #0d1110); }
.diy-pick__head { flex: none; display: flex; align-items: center; gap: .08rem; font-size: max(.16rem, 11px); }
.diy-pick__note { flex: 1; min-width: 0; font-size: max(.12rem, 9px); color: var(--text-lo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diy-pick__x { display: grid; place-items: center; width: max(.4rem, 28px); height: max(.4rem, 28px); color: var(--text-md); background: none; border: 1px solid var(--line-2); cursor: pointer; }
.diy-pick__bar { flex: none; display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; }
.diy-pick__search { flex: 1 1 2rem; min-width: 120px; height: max(.36rem, 26px); padding: 0 .08rem; font: inherit; font-size: max(.13rem, 10px); color: var(--text-hi); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); }
.diy-pick__main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: .12rem; }
.diy-pick__list, .diy-pick__detail { min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
.diy-pick__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(3.2rem, 200px), 1fr)); align-content: start; gap: .06rem; }
.diy-opt {
  position: relative; display: flex; align-items: center; gap: .07rem; min-width: 0; padding: .06rem; font: inherit; color: var(--text-hi); text-align: left;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); cursor: pointer; touch-action: manipulation;
}
.diy-opt:hover { background: rgba(255, 255, 255, .06); }
.diy-opt.is-sel { border-color: var(--mint-500); background: rgba(52, 211, 153, .08); }
.diy-opt.is-taken { opacity: .45; cursor: not-allowed; }
.diy-opt__ava { flex: none; display: grid; place-items: center; width: max(.5rem, 32px); height: max(.5rem, 32px); overflow: hidden; background: #0a0d0c; border: 1px solid var(--line-2); }
.diy-opt__ava img { width: 100%; height: 100%; object-fit: cover; }
.diy-opt__txt { display: flex; flex-direction: column; gap: .02rem; min-width: 0; }
.diy-opt__top { display: flex; align-items: center; gap: .04rem; min-width: 0; }
.diy-opt__name { font-size: max(.15rem, 11px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diy-opt__class { display: inline-flex; align-items: center; gap: .03rem; font-size: max(.11rem, 8px); color: var(--text-lo); }
.diy-opt__prof { width: max(.14rem, 10px); height: max(.14rem, 10px); }
.diy-opt__taken { position: absolute; right: .04rem; bottom: .03rem; font-size: max(.1rem, 8px); color: var(--amber); }
.diy-pick__detail { display: flex; flex-direction: column; gap: .06rem; padding: .06rem; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); }
.diy-pick__who { display: flex; align-items: center; gap: .08rem; }
.diy-pick__ava { display: grid; place-items: center; width: max(.6rem, 40px); height: max(.6rem, 40px); overflow: hidden; background: #0a0d0c; border: 1px solid var(--line-2); }
.diy-pick__ava img { width: 100%; height: 100%; object-fit: cover; }
.diy-pick__wtxt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.diy-pick__wtxt b { font-size: max(.17rem, 12px); }
.diy-pick__wtxt small { font-size: max(.12rem, 9px); color: var(--text-lo); }
.diy-pick__sec { display: flex; align-items: baseline; gap: .06rem; margin: .04rem 0 0; font-size: max(.14rem, 10px); color: var(--text-md); }
.diy-pick__sec small { font-size: max(.11rem, 8px); color: var(--text-lo); font-weight: 400; }
.diy-pick__choices { display: flex; flex-direction: column; gap: .04rem; }
.diy-choice {
  display: flex; align-items: flex-start; gap: .07rem; padding: .05rem; font: inherit; color: var(--text-hi); text-align: left;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); cursor: pointer; touch-action: manipulation;
}
.diy-choice:disabled { cursor: default; }
.diy-choice.is-on { border-color: var(--mint-500); background: rgba(52, 211, 153, .08); }
.diy-choice__icon { flex: none; display: grid; place-items: center; width: max(.36rem, 24px); height: max(.36rem, 24px); color: var(--text-lo); }
.diy-choice__icon img { width: 100%; height: 100%; object-fit: contain; }
.diy-choice__body { display: flex; flex-direction: column; gap: .02rem; min-width: 0; }
.diy-choice__head { display: flex; align-items: center; gap: .05rem; flex-wrap: wrap; font-size: max(.14rem, 10px); }
.diy-choice__desc { font-size: max(.12rem, 9px); line-height: 1.45; color: var(--text-md); }
.diy-pick__foot { flex: none; display: flex; justify-content: flex-end; gap: .08rem; }
/* 0.2.0 自选编队: the slots the player filled (the entry button's chip) */
.lo-entry__diy { color: var(--text-on-mint); background: var(--mint-500); }
@media (max-width: 760px) {
  .diy { padding: .1rem .16rem .16rem; }
  .diy-pick { padding: .08rem .12rem .1rem; }
  .diy-pick__main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1.1fr); }
  .diy-slot { grid-template-columns: auto minmax(0, 1fr); }
  .diy-slot__acts { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
}

/* ---- 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;
}
/* 0.2.0 补位: operators marked 未持有 on the 干员持有 tab */
.lo-entry__own { display: inline-flex; align-items: center; gap: .2em; height: 1.5em; padding: 0 .4em; font-size: .75em; font-weight: 700; color: var(--ice-900); background: var(--ice); border-radius: 1em; white-space: nowrap; }

/* Untimed phases (user playtest #11 / #4 item 3: the official 独立模拟 shows no countdown outside combat — the server
   sends deadline 0 for them, Match.soloUntimed): ui/components.js Countdown now renders nothing without a deadline;
   this rule stays as a safety net for the old "无倒计时" placeholder ("--" digits + COUNTDOWN label). */
.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 ------------------------------------------------------------------------------------------- */
/* tighter tabs below 1200 px: the co-op briefing's countdown, chips and buttons beside three English tabs */
@media (max-width: 1200px) {
  .lo-tab { padding: .02rem .08rem; letter-spacing: .04em; }
}
@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; }
  /* the co-op briefing's countdown takes the place of the 已调整 / 同步 chips */
  .lo-deadline ~ .lo-sync, .lo-deadline ~ .lo-count { display: none; }
}
/* phones in landscape (up to 932 px wide): the top bar keeps the tabs clear of the right column — no 已调整 / 同步 chips,
   and 返回 / 全部恢复默认 (全部持有, 全部清空; each confirms first) show their icon only, the text staying their name */
@media (max-width: 1000px) {
  .lo-count, .lo-sync { display: none; }
  .lo-top .btn__icon + .btn__label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
/* phones and small tablets (up to 1000 px wide; 0.2.2 — 760 px before the roster became one list with quick choices): the
   list takes the whole width and the detail slides over it — a row's quick choice keeps the list, its portrait / name
   opens the detail */
@media (max-width: 760px) {
  .lo-top { padding: 0 .16rem; }
}
@media (max-width: 1000px) {
  .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; }
}
/* narrow phones: the row's bonds give their line to the name, the columns keep their place */
@media (max-width: 700px) {
  .lo-card__bonds { display: none; }
}
@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; }
}
/* 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 .lo-card { animation: none; transition: none; } }

/* 导出 / 导入 (干员调配 presets): the dialog is the shared Modal, rendered NEXT TO `.lo` (a sibling) rather than inside
   it — so components.css `.modal { position: fixed }` and its z-index above the overlay apply as they do everywhere
   else, and `.lo > *` needs no exception for it. Below: the payload textarea + the hidden input behind 选择文件. */
.lo-io__hint { margin: 0 0 max(.1rem, 8px); font-size: max(.18rem, 12px); line-height: 1.55; color: var(--text-md); }
.lo-io__hint b { color: var(--mint-400); font-size: max(.22rem, 13px); margin: 0 .02rem; }
.lo-io__hint strong { color: var(--gold); }
.lo-io__text {
  box-sizing: border-box; width: 100%; height: max(2.4rem, 160px); min-height: 120px; resize: vertical;
  padding: max(.1rem, 8px) max(.12rem, 10px);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* 16 px: iOS zooms into a focused field below that (same reason as ui/clipboard.js) */
  font-size: max(.2rem, 16px); line-height: 1.45;
  color: var(--text-hi); background: rgba(4, 10, 8, .55);
  border: 1px solid var(--line-2); border-radius: 2px; outline: none;
  /* wrap instead of a horizontal scrollbar: phones are narrow and the payload is meant to be read/copied whole */
  white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto;
}
.lo-io__text:focus { border-color: var(--mint-700); }
.lo-io__text::placeholder { color: var(--text-lo); }
.lo-io__file { display: none; }
.lo-io__file { display: none; }

/* 皮肤 (干员皮肤 / 时装 — docs/SKINS.md): the 干员调配 detail panel's picker, one tile per skin (the operator's own model
   first). Mirrors the 模组 tiles: a 3-wide grid that wraps, the art on top and its name / series under it. A skin this
   install has no model for is dimmed and not clickable (未安装) — the choice would have nothing to draw. */
.lo-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(1.5rem, 88px), 1fr)); gap: .08rem; }
.lo-skin {
  position: relative; display: flex; flex-direction: column; gap: .04rem; padding: .06rem;
  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-skin:hover { border-color: var(--line-3); }
.lo-skin.is-on { color: var(--text-hi); background: linear-gradient(180deg, rgba(242, 189, 62, .14), rgba(242, 189, 62, .02) 70%); border-color: var(--gold-2); }
.lo-skin.is-off { cursor: not-allowed; opacity: .45; }
.lo-skin__art {
  display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line-2); border-radius: 2px;
}
.lo-skin__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lo-skin__art--none { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 4px, transparent 4px 8px); }
.lo-skin.is-on .lo-skin__art { border-color: var(--gold-2); box-shadow: 0 0 .1rem rgba(255, 198, 0, .3); }
.lo-skin__text { min-width: 0; display: flex; flex-direction: column; gap: .01rem; }
.lo-skin__name { font-size: max(.16rem, 11px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-skin__group { font-family: var(--font-num); font-size: max(.12rem, 9px); letter-spacing: .06em; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-skin__badge {
  position: absolute; right: .03rem; top: .03rem; padding: 0 .05rem; font-size: max(.11rem, 8px);
  color: #14261d; background: var(--gold-2, #f2bd3e); border-radius: 2px;
}
.lo-skin__badge--off { color: var(--text-lo); background: rgba(255, 255, 255, .12); }
.lo-skin__hint { margin: .06rem 0 0; font-size: max(.14rem, 10px); color: var(--text-lo); }