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

.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; }

/* ---- 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; 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; 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; 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-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; }
.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-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(calc(.16 * var(--t)), 11px); }
.diy-slot__fill small { font-size: max(calc(.12 * var(--t)), 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(calc(.3 * var(--t)), 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(calc(.12 * var(--t)), 9px); color: var(--text-lo); letter-spacing: .06em; }
.diy-slot__name { font-size: max(calc(.17 * var(--t)), 12px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diy-slot__class { font-size: max(calc(.12 * var(--t)), 9px); color: var(--text-lo); }
.diy-slot__kit { display: flex; align-items: center; gap: .05rem; min-width: 0; font-size: max(calc(.13 * var(--t)), 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(calc(.12 * var(--t)), 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(calc(.12 * var(--t)), 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(calc(.11 * var(--t)), 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(calc(.12 * var(--t)), 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; 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(calc(.16 * var(--t)), 11px); }
.diy-pick__note { flex: 1; min-width: 0; font-size: max(calc(.12 * var(--t)), 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(calc(.13 * var(--t)), 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: 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(calc(.15 * var(--t)), 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(calc(.11 * var(--t)), 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(calc(.1 * var(--t)), 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(calc(.17 * var(--t)), 12px); }
.diy-pick__wtxt small { font-size: max(calc(.12 * var(--t)), 9px); color: var(--text-lo); }
.diy-pick__sec { display: flex; align-items: baseline; gap: .06rem; margin: .04rem 0 0; font-size: max(calc(.14 * var(--t)), 10px); color: var(--text-md); }
.diy-pick__sec small { font-size: max(calc(.11 * var(--t)), 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(calc(.14 * var(--t)), 10px); }
.diy-choice__desc { font-size: max(calc(.12 * var(--t)), 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(calc(.15 * var(--t)), 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(calc(.18 * var(--t)), 12px); }
.lo .lo-top__right .btn, .lo .lo-dhead__reset { height: max(.36rem, 28px); padding: 0 max(.16rem, 8px); font-size: max(calc(.15 * var(--t)), 11px); }
.lo .lo-search .field__box { height: max(.56rem, 28px); padding: 0 max(.16rem, 6px); }
.lo .lo-search .field__input { font-size: max(calc(.2 * var(--t)), 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(calc(.18 * var(--t)), 12px); line-height: 1.55; color: var(--text-md); }
.lo-io__hint b { color: var(--mint-400); font-size: max(calc(.22 * var(--t)), 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(calc(.2 * var(--t)), 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; }

/* Per-operator voice, a browser-local preference in roster and DIY details. */
.lo-voice { display: flex; flex-wrap: wrap; align-items: center; gap: .12rem; padding: .14rem 0; font-size: calc(.18 * var(--t)); }
.lo-voice > small { flex-basis: 100%; color: var(--text-dim); font-size: calc(.15 * var(--t)); }
.lo-voice .lo-select { min-width: 1.6rem; max-width: 100%; }
.lo-voice__preview { height: max(.4rem, 24px); padding: 0 .12rem; font: inherit; font-size: max(.15rem, 11px); color: var(--mint-400); background: transparent; border: 1px solid var(--line-2); cursor: pointer; }
.lo-voice__preview:hover, .lo-voice__preview:focus-visible { border-color: var(--mint-700); }

/* DIY uses the same aligned rows and detail sections as operator loadout. */
.diy-pick__list .diy-opt { min-height: 64px; padding: .1rem; }
.diy-pick__list .diy-opt__txt { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: .1rem; }
.diy-pick__list .diy-opt__top { flex-wrap: wrap; }
.diy-pick__detail > .lo-sec { flex: none; }
@media (max-width: 900px) {
  .diy-pick__list .diy-opt__txt { display: flex; flex-direction: column; align-items: flex-start; gap: .04rem; }
}

.diy-choice__tags { display: flex; flex-wrap: wrap; gap: .08rem; color: var(--text-lo); font-size: max(calc(.12 * var(--t)), 10px); }

/* ---- 干员皮肤 (docs/SKINS.md, ui/skinPicker.js) -------------------------------------------------------------------
   Five tiles per row, always — `repeat(5, …)`, not `auto-fit`, so a tile is the same size for every operator and the
   operator's appearance does not change with how many skins its plugins happen to write. The 默认 tile is the first of
   the five and every operator has it. The art is a FIXED 1:2 box: the shape of the client's 180×360 portrait, the "big
   icon" an appearance is chosen by (the 立绘 behind the enlarged preview is 1024 px+ for most skins, which is exactly
   why it is not the tile). `object-fit: cover` fills the box from either source, and a skin that ships no art shows the
   OPERATOR's own — dimmed (`.lo-skin--fallback`) so a plugin that replaced only the model is legible, never a slash or
   a placeholder box. Clicking the chosen tile opens the enlarged preview (`.lo-skin-preview`, a Modal).

   Every tile ALSO carries the same appearance's 1:1 `avatar` (ui/skins.js availableSkins.avatar — the skin's own, else
   the operator's; 273/273 of the installed skins ship one). It stays in the DOM but undrawn until the last media query
   of this block: a phone in landscape — the only phone orientation this screen is used in, theme.css covers a portrait
   device with 「请将设备横屏」 — has a detail panel of 193–263 px (measured 740×360 … 932×430), and the 1:2 tile is
   264–379 px tall there, which made 皮肤 the ONE section of that panel no phone could see whole (the 潜能与练度 / 技能 /
   局内数值 / 模组 sections are 135–163 px in the same panel). On that short, narrow panel the tile draws the 1:1 avatar
   — the shape of the roster's own `.lo-card__art` — five to the row, and the section is 216 px at 844×390: it fits. */
.lo-skins { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .1rem; align-items: start; }
.lo-skin {
  position: relative; min-width: 0; 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:active { transform: scale(.98); }
.lo-skin:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 2px; }
.lo-skin.is-on { color: var(--text-hi); background: linear-gradient(180deg, rgba(78, 216, 175, .14), rgba(78, 216, 175, .02) 75%); border-color: rgba(78, 216, 175, .7); }
.lo-skin__art {
  position: relative; aspect-ratio: 1 / 2; min-height: max(1.5rem, 130px); overflow: hidden;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line);
}
.lo-skin__art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* the appearance's 1:1 avatar of the same tile, drawn only where the 1:2 box does not fit (the media query at the end) */
.lo-skin__art > .lo-skin__art--faceimg { display: none; }
.lo-skin__art--none { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 3px, transparent 3px 7px); }
/* the art shown is the operator's own (the skin ships none): the name and the series still say which skin this is */
.lo-skin--fallback .lo-skin__art { opacity: .72; }
.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; }
/* the enlarged view: the 立绘 (whole, not the cropped tile), as large as the modal allows */
.lo-skin-preview { display: flex; align-items: center; justify-content: center; }
.lo-skin-preview img { display: block; max-width: 100%; max-height: 65dvh; object-fit: contain; }
@media (max-width: 900px) { .lo-skins { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* phones in landscape (a narrow viewport that is also short: the detail panel is the whole width and ~200 px tall): the
   1:2 tile is taller than that panel, so the five-to-a-row 1:1 avatar takes over — `min-height: 0` because the panel,
   not a 130 px floor, decides the size here. A tile with no avatar anywhere keeps its portrait (`.lo-skin__art--face`) */
@media (max-width: 1000px) and (max-height: 520px) {
  .lo-skins { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lo-skin__art { aspect-ratio: 1 / 1; min-height: 0; }
  .lo-skin__art--face > .lo-skin__art--big { display: none; }
  .lo-skin__art--face > .lo-skin__art--faceimg { display: block; }
}