feedback7 R22-LOADOUT: 干员调配's roster is one list — a row per operator with the quick skill / module choices and the 潜能 / 练度 selects in aligned columns — and the detail opens with 潜能与练度; golden: unchanged

The owner's decisions of 2026-10-08: 「D12 [PR #301] 可以做，具体布局怎么优化你来决定，他那样确实方便，但是三个竖排有点乱影响观感」 and 「D7D8调配干员里自己设置吧，默认满潜满加成」. The quick choices are PR #301's idea (by @farridge); the layout is new: one list instead of three columns of cards. - screens/loadout.js: RosterHead + RosterRow — every row the same four columns under a sticky head (干员 | 技能 | 模组精锐 | 潜能 · 练度): portrait / name / bonds (selects, opens the detail), three skill slots (an empty one for a two-skill chess; the label says slot, name, SP, duration — quickSkillTags), the elite's modules (不装备 first), the 潜能 / 练度 selects; a quick choice goes through setChoice / setEntries like the detail and keeps a phone on the list. The detail's 普通 / 精锐 skill toggle is one preview for the skills, the 特质 and the rows. The detail opens with the 潜能与练度 section; 恢复默认 / 全部恢复默认 reset the settings too (全部: the roster's operators — a 自选 pick's stay with the 自选编队 tab); 导入 reports a settings-only import; ←/→ stay inside a focused row's choices. - screens/cultivation.js (new): CultivationSelects (two compact selects; quiet at the defaults, mint when changed) and CultivationSection (潜能 1–6 and the four official tiers — effects.json names and effect texts — the rule in one line, the stand-in note for a chess marked not owned). - screens/diy.js: an owned 自选 pick's slot card carries its operator's selects; a prototype says it has neither. - css: the head and the rows share one grid (`--cols`), 32 px quick targets (40 px on a coarse pointer); the detail slides over the list below 1000 px (was 760 px); below 700 px the row's bonds give way to the name. Headless check at 1920 × 1080, 1366 × 768, 844 × 390 and 667 × 375: no sideways overflow, the head's columns equal every row's. - The 局内数值 caption says 含潜能与练度 when the numbers carry both (effects.json loaded); the overlay's note says the skills, modules, 潜能 and 练度 can be set (the operator's in-match level cannot). - i18n: 21 strings in the four packs (the tier names, short tier labels, the notes, the reset confirm, the import toast). - Docs: design/match.md (the list, the 潜能与练度 section, 导出's `ops`), ARCHITECTURE.md (screens/cultivation.js). - Tests: test/ui/loadout-rows.test.js (new, 7): a row's pick / skill slots / modules / aria-pressed / callbacks and the shared 精锐 preview, its selects (values, options, a change, the changed mark, a stand-in), the head, the detail's section (tiers from effects.json, the effect text, the stand-in note), a 自选 owned pick vs a prototype, 局内数值 at 潜能1 / 未精英化 and at the defaults with its caption, the css grid and breakpoints. e2e (not run here; their steps replayed with a headless page): the row pick selector, the phone test (one list, 40 px targets, the detail slides over, back to the list), the 局内数值 expectations ×1.1, a new 潜能 / 练度 flow (row select → stored, 部署费用 17 / 攻击 454; the detail's 未精英化 → 413; the row follows; 恢复默认).
2026-10-08 21:38:26 +08:00
1 parent 519f04e2d5
commit dc336f24a1
@@ -103,7 +103,7 @@ so old imports keep working: `public/js/ui/gameLogic.js` (`public/js/ui/gameLogi
 | `public/index.html`, `public/js/main.js` | the page and its entry: boot, the router (title → lobby → room → game) |
 | `public/js/net.js`, `public/js/store.js`, `public/js/data.js` | the socket client, the observable store, the data loader (`/data/*.json`, with the English overlay) |
 | `public/js/battle/` | `runner.js` (the local battle: loads `/sim/`, steps it, reports), `observe.js` (who may watch which field) |
-| `public/js/screens/` | `title.js`, `lobby.js`, `room.js`, `loadout.js` (干员调配), `ownership.js` (干员持有), `diy.js` (自选编队), `briefing.js`, `bandDraft.js`, `game.js` with `public/js/screens/game/`, `result.js` |
+| `public/js/screens/` | `title.js`, `lobby.js`, `room.js`, `loadout.js` (干员调配), `cultivation.js` (its 潜能 / 练度 controls), `ownership.js` (干员持有), `diy.js` (自选编队), `briefing.js`, `bandDraft.js`, `game.js` with `public/js/screens/game/`, `result.js` |
 | `public/js/ui/` | the HUD components (`hud.js`, `shopBar.js`, `detailPanel.js`, `bondStrip.js`, `teamPanel.js` …); `public/js/ui/gameLogic/` the pure in-match logic, unit-tested in Node |
 | `public/js/render/` | the field view: `app.js` with `public/js/render/app/`, `units.js` and `spine.js` (models), `tiles.js`, `projection.js`, `interp.js`, `pick.js`, `drag.js`, `public/js/render/fx/` (effects; `kinds.js` maps the fx kinds), `public/js/render/board3d/` (the official 3D board) |
 | `public/css/`, `public/i18n/<code>.json` | the styles; the UI strings of each language pack (English ships) |
@@ -99,9 +99,9 @@ Official rule (bwiki 盟约, 更新公告 5114): before a match the player canno

 **Sim:** `simdata` resolves a unit def for `(chessId, skillIndex, moduleId)` (cached): `skill` = the selected SkillRecord; stats = `statsBase` + module attr (elite) ; trait/talents = base with the selected module's overrides. Kit contract (backward compatible): a kit function `(bb, chess) => { skill?, skills?: { [skillId]: SkillSpec }, talents, trait }` receives `chess.skill` = the **selected** skill and `bb` = its blackboard; the loader uses `skills[selectedSkillId]` if present, else `skill` only when the selected skill is the chess's default, else the **generic** skill spec — talents/trait from the kit always apply. Every visible chess must get hand-authored specs for all of its selectable skills (tracked by a coverage test).

-**UI:** a 干员调配 screen reachable from the lobby, room and briefing (INFO_CHECK): the detail starts with the operator's 特质 — the in-match `GarrisonBlock` / RichText of the form its 普通 / 精锐 skill toggle shows, triggers such as 「<进入休整期时>」 kept (0.2.2, PR #301 by @farridge); filter by tier/bond/class, per chess choose skill (icon, name, SP info, desc at Lv4 and Lv7) and elite module (official type icon from the local-client art when extracted (§13), else a lettered tile; name/type, stat bonus, trait/talent changes), 恢复默认, persisted; a 局内数值 section between the skills and the modules (普通 / 精锐 toggle, 精锐 first) draws the detail card's own stats block, 特性 and 天赋 for the chosen skill / module (§22.16); the chosen skill/module shown on shop cards and in the detail panel (a teammate's unit — 前往查看 in prep, 联防 / 最终攻势 fields, an observed battle — shows **its owner's** skill/module from its UnitInfo `skillIndex` / `moduleId`, `gameLogic.js unitLoadout`) — which also shows the stats, 特性, talents and attack range the unit fights with (`shared/loadoutRecord.js` `loadoutRecord` / `attackRangeGrid`, the same composition the sim's `getChess(id, loadout)` uses; the deploy wheel's range preview too) — the range it is deployed with: a selected passive range skill (引星棘刺 S3 3-9) and the 特性's permanent 攻击距离 (信仰搅拌机 SPT-Y +1) included, over all 1284 loadouts equal to the battle's range at deployment; in battle and prep the card draws the live `range` (§21.16). In battle the renderer plays the equipped skill's own Spine clip and ON_SKILL_START sound (`UnitInfo.skillIndex`; `data/assets.json` lists icons, clips and sounds for every skill index).
+**UI:** a 干员调配 screen reachable from the lobby, room and briefing (INFO_CHECK): the roster is one list, a row per operator with aligned columns under a head row — portrait / name / bonds (opens the detail), the skills and the elite's modules to tap (不装备 first; the quick choices of PR #301 by @farridge, laid out as one list instead of its three columns of cards, the owner's call of 2026-10-08), the 潜能 / 练度 selects (`screens/loadout.js RosterRow`, `screens/cultivation.js`); the detail beside it (below 1000 px wide it slides over the list, a quick choice keeps the list) opens with the 潜能与练度 section (潜能 1–6, the four official 练度 tiers with their effect texts); the detail then shows the operator's 特质 — the in-match `GarrisonBlock` / RichText of the form its 普通 / 精锐 skill toggle shows, triggers such as 「<进入休整期时>」 kept (0.2.2, PR #301 by @farridge); filter by tier/bond/class, per chess choose skill (icon, name, SP info, desc at Lv4 and Lv7) and elite module (official type icon from the local-client art when extracted (§13), else a lettered tile; name/type, stat bonus, trait/talent changes), 恢复默认, persisted; a 局内数值 section between the skills and the modules (普通 / 精锐 toggle, 精锐 first) draws the detail card's own stats block, 特性 and 天赋 for the chosen skill / module (§22.16); the chosen skill/module shown on shop cards and in the detail panel (a teammate's unit — 前往查看 in prep, 联防 / 最终攻势 fields, an observed battle — shows **its owner's** skill/module from its UnitInfo `skillIndex` / `moduleId`, `gameLogic.js unitLoadout`) — which also shows the stats, 特性, talents and attack range the unit fights with (`shared/loadoutRecord.js` `loadoutRecord` / `attackRangeGrid`, the same composition the sim's `getChess(id, loadout)` uses; the deploy wheel's range preview too) — the range it is deployed with: a selected passive range skill (引星棘刺 S3 3-9) and the 特性's permanent 攻击距离 (信仰搅拌机 SPT-Y +1) included, over all 1284 loadouts equal to the battle's range at deployment; in battle and prep the card draws the live `range` (§21.16). In battle the renderer plays the equipped skill's own Spine clip and ON_SKILL_START sound (`UnitInfo.skillIndex`; `data/assets.json` lists icons, clips and sounds for every skill index).

-**导出 / 导入 a loadout:** 导出 hands the current loadout out as a versioned envelope `{ kind: 'stronghold.loadout', v, exportedAt, count, entries }` — copied through `ui/clipboard.js copyText` or downloaded as a file. 导入 accepts that envelope, the stored `{ v, entries }` form and a bare `{ [chessId]: { skill, module } }` map (serialised text too), and refuses another tool's `kind`, junk, an empty result and a **newer** `v` (`parseImport` — a newer payload is never mis-read). Both go through `loadoutSync.applyLoadoutEntries` → `sanitizeEntries`, so a preset from another build never sends the server an entry it would refuse, an import that keeps nothing changes nothing, and the result is reported as N imported / M not (`ui/loadoutModel.js`, `screens/loadout.js`).
+**导出 / 导入 a loadout:** 导出 hands the current loadout out as a versioned envelope `{ kind: 'stronghold.loadout', v, exportedAt, count, entries, ops }` (`ops`: the 潜能 / 练度 settings, 0.2.2 — an import without them leaves the current settings alone) — copied through `ui/clipboard.js copyText` or downloaded as a file. 导入 accepts that envelope, the stored `{ v, entries }` form and a bare `{ [chessId]: { skill, module } }` map (serialised text too), and refuses another tool's `kind`, junk, an empty result and a **newer** `v` (`parseImport` — a newer payload is never mis-read). Both go through `loadoutSync.applyLoadoutEntries` → `sanitizeEntries`, so a preset from another build never sends the server an entry it would refuse, an import that keeps nothing changes nothing, and the result is reported as N imported / M not (`ui/loadoutModel.js`, `screens/loadout.js`).
 **干员持有 (0.2.0 补位):** the overlay's second tab marks operators as not owned (the 55 NORMAL chess; per-browser `sp.pref.ownership` = `{ v, notOwned }`, synced as `room.ownership { notOwned }` by the same sync engine as the loadout, `ui/loadoutSync.js installPrefSync`; 导出 / 导入 as `{ kind: 'stronghold.ownership', v, exportedAt, count, notOwned }`). A not-owned chess fights as its official stand-in with the backup skill / module — the loadout never applies to it ("对于补位干员其技能不可更改") — and is shown as the stand-in wherever the player's copy appears (shop / reward cards, hand and 临时整备区, board, detail card, result lineup, a teammate's scouting and bond popups: portrait, name, model, with a small 「替补」 mark; the owner's recall of the official mode, 2026-10-06), while its bonds, 特质, tier, price and merge stay the chess's; the 0.2.0 补位 design subsections have the rules and sources.
 **自选编队 (0.2.0):** the overlay's third tab fills the four DIY slots (5阶 ×2, 6阶 ×2) with an owned 6★ outside the chess pool (any of its three skills, any module of its elite form but a 集成战略 one) or a prototype (its locked skill / module); only operators with a kit are offered (`welcome.diyKitted`). Per-browser `sp.pref.diy` = `{ v, picks }`, synced as `room.diy { picks }` by the same sync engine; 导出 / 导入 as `{ kind: 'stronghold.diy', v, exportedAt, count, picks }` (`ui/diyModel.js`, `screens/diy.js`). In the match a slotted piece is the operator for its player (name, art, class, bonds from its factions, no 特质, the pick's skill and module; the slot's tier, price and merge), sold only in that player's shop from the slot's 调度中心 level with its own stock; the shop / reward / detail cards and the own pieces carry a 「自选」 badge (`ui/gameLogic/diy.js`); the 0.2.0 自选编队 design subsection has the rules and sources.

@@ -138,56 +138,93 @@
 .lo-toggle.is-on .lo-toggle__box { background: var(--mint-500); border-color: var(--mint-400); }
 .lo-toggle.is-on .lo-toggle__box .icon { opacity: 1; }

-/* ---- roster grid ------------------------------------------------------------------------------------------------------------ */
-.lo-grid {
+/* ---- 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;
-  display: grid; grid-template-columns: repeat(auto-fill, minmax(max(1.16rem, 64px), 1fr)); grid-auto-rows: max-content;
-  align-content: start; gap: .1rem; padding: .06rem .08rem .2rem .02rem;
-  scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
+  padding: 0 .06rem .2rem 0; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
 }
-.lo-empty { grid-column: 1 / -1; padding: .4rem; text-align: center; font-size: max(.16rem, 11px); }
+.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-card {
+.lo .lo-card {
  --tc: var(--tier-1);
-  position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0;
-  padding: 0; font: inherit; color: var(--text-hi); text-align: left; cursor: pointer;
-  background: linear-gradient(180deg, rgba(34, 41, 38, .95), rgba(14, 17, 16, .98));
-  border: 1px solid var(--line); box-shadow: inset 0 -2px 0 var(--tc);
-  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
-  touch-action: manipulation;
+  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-card:hover { border-color: var(--line-3); transform: translateY(-1px); }
-.lo-card.is-sel { border-color: var(--mint-400); box-shadow: inset 0 -2px 0 var(--tc), 0 0 0 1px var(--mint-500), 0 0 .16rem rgba(23, 249, 183, .35); }
-.lo-card:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 1px; }
-.lo-card__art { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #1b201e; }
-.lo-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.lo-card__art::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, transparent, rgba(8, 10, 9, .85)); }
-.lo-card__glyph { display: grid; place-items: center; width: 100%; height: 100%; font-size: .44rem; font-weight: 900; color: var(--text-dim); }
-.lo-card__tier { position: absolute; left: .03rem; top: .03rem; z-index: 1; }
-.lo-card__flag {
-  position: absolute; right: 0; top: 0; z-index: 1; width: .22rem; height: .22rem;
-  background: linear-gradient(225deg, var(--mint-400) 50%, transparent 50%);
-}
-/* 0.2.0 补位: a chess marked 未持有 on the 干员持有 tab (its stand-in fights with a fixed skill) */
-.lo-card__sub { position: absolute; right: .03rem; top: .26rem; z-index: 1; 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: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__name {
-  position: absolute; left: .05rem; right: .05rem; top: calc(100% - max(.64rem, 34px)); z-index: 1;
-  font-size: max(.15rem, 10px); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-  text-shadow: 0 1px 2px #000;
+
+.lo-card__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-card__kit { display: flex; align-items: center; justify-content: space-between; gap: .04rem; height: max(.3rem, 18px); padding: 0 .04rem; background: rgba(0, 0, 0, .4); }
-.lo-card__sk { display: inline-flex; align-items: center; gap: .04rem; font-size: max(.13rem, 9px); color: var(--text-lo); }
-.lo-card__sk b { font-family: var(--font-num); letter-spacing: .04em; }
-.lo-card__sk.is-alt { color: var(--mint-400); }
-.lo-card__mod {
-  display: inline-grid; place-items: center; min-width: max(.24rem, 15px); height: max(.2rem, 13px); padding: 0 .03rem;
-  font-family: var(--font-num); font-size: max(.13rem, 9px); font-weight: 700; color: var(--text-lo);
-  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04);
-}
-.lo-card__mod.is-alt { color: var(--text-on-mint); background: var(--gold-2); border-color: var(--gold); }
+.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); }
@@ -195,6 +232,7 @@
 .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; }
 .lo-sicon__outline { position: absolute; inset: -.05rem; width: calc(100% + .1rem) !important; height: calc(100% + .1rem) !important; object-fit: fill; pointer-events: none; }
@@ -205,6 +243,7 @@
 .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); }

@@ -430,6 +469,9 @@
 .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; }
@@ -532,9 +574,13 @@
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
 }
-/* phones (the root scale is clamped at 40 px: less than ~14 rem of width): the detail slides over the roster */
+/* 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; }
@@ -545,11 +591,14 @@
  }
  .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; }
-  .lo-grid { grid-template-columns: repeat(auto-fill, minmax(max(1rem, 58px), 1fr)); }
 }
 /* the shared Button / TextField scale with the root (40 px/rem on phones ⇒ 6–7 px text, 14–20 px tall): the overlay's
   own controls (返回, 全部恢复默认, 恢复默认, the search field) keep a readable size and a tappable height (review fix) */
@@ -560,7 +609,7 @@
 .lo .lo-search .field__icon { width: max(.22rem, 14px); height: max(.22rem, 14px); }
 .sp-coarse .lo-chip, .sp-coarse .lo-toggle, .sp-coarse .lo-select { min-height: 30px; }
 .sp-coarse .lo-seg button { min-height: 28px; }
-@media (prefers-reduced-motion: reduce) { .lo, .lo-card { animation: none; transition: none; } }
+@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
@@ -1061,5 +1061,26 @@
  "自回": "Auto",
  "常驻": "Always",
  "瞬发": "Instant",
-  "部署触发": "On deployment"
+  "部署触发": "On deployment",
+  "未精英化": "Non-Elite",
+  "精英阶段1": "Elite 1",
+  "精英阶段2": "Elite 2",
+  "精英阶段2-60级": "Elite 2 Lv.60",
+  "潜能": "Potential",
+  "潜能 {n}": "Potential {n}",
+  "练度": "Development",
+  "潜能与练度": "Potential & development",
+  "满潜能 · 精英2 Lv.60": "Max potential · Elite 2 Lv.60",
+  "干员持有中标记为未持有：替补干员没有潜能与练度；这里的设置在改回「持有」后生效": "Marked as not owned on Operator Roster: the stand-in has no potential or development; these settings apply once it is owned again",
+  "潜能取你自己的潜能；练度是自持有加成（已持有的同名干员的养成，攻击 / 防御 / 生命单独乘算）。未持有的特许干员按潜能1、未精英化。": "Potential is your own; development is the owned-operator bonus (your training of the same Operator: ATK / DEF / HP, a separate multiplier). A licensed Operator you do not own fights at Potential 1, Non-Elite.",
+  "原型干员没有潜能与练度": "A prototype Operator has no potential or development",
+  "模组仅在精锐形态生效": "Modules apply only to the Elite form",
+  "未持有（干员持有）：由替补干员上场，替补干员没有潜能与练度": "Not owned (Operator Roster): its stand-in fights, with no potential or development",
+  "含潜能与练度；": "Potential and development included; ",
+  "将 {nChanged} 名干员的技能、模组、潜能与练度恢复为默认配置？": "Reset the skills, modules, potential and development of {nChanged} Operators to their defaults?",
+  "已导入 {n} 名干员的潜能与练度": "Imported the potential and development of {n} Operators",
+  "精英1": "E1",
+  "精英2": "E2",
+  "精英2 Lv.60": "E2 Lv.60",
+  "开始模拟前可调整干员携带的技能与模组，以及潜能与练度；干员的局内等级不可调整": "Before the simulation starts you can change the Skills and Modules your Operators carry, and their potential and development; Operator levels in the match cannot be changed"
 }
@@ -1067,5 +1067,26 @@
  "自回": "自動",
  "常驻": "常時",
  "瞬发": "即時",
-  "部署触发": "配置時"
+  "部署触发": "配置時",
+  "未精英化": "未昇進",
+  "精英阶段1": "昇進段階1",
+  "精英阶段2": "昇進段階2",
+  "精英阶段2-60级": "昇進段階2-Lv60",
+  "潜能": "潜在",
+  "潜能 {n}": "潜在{n}",
+  "练度": "育成度",
+  "潜能与练度": "潜在と育成度",
+  "满潜能 · 精英2 Lv.60": "潜在最大・昇進2 Lv60",
+  "干员持有中标记为未持有：替补干员没有潜能与练度；这里的设置在改回「持有」后生效": "オペレーター所持で未所持に設定中：代役オペレーターには潜在も育成度もありません。ここでの設定は「所持」に戻すと有効になります",
+  "潜能取你自己的潜能；练度是自持有加成（已持有的同名干员的养成，攻击 / 防御 / 生命单独乘算）。未持有的特许干员按潜能1、未精英化。": "潜在はあなた自身の潜在です。育成度は所持オペレーターボーナス（同名オペレーターの育成度による攻撃・防御・HPの独立した乗算）です。未所持のプリセットオペレーターは潜在1・未昇進です。",
+  "原型干员没有潜能与练度": "モデルオペレーターには潜在も育成度もありません",
+  "模组仅在精锐形态生效": "モジュールは精鋭のみ有効です",
+  "未持有（干员持有）：由替补干员上场，替补干员没有潜能与练度": "未所持（オペレーター所持）：代役オペレーターが出撃し、潜在も育成度もありません",
+  "含潜能与练度；": "潜在と育成度を含む。",
+  "将 {nChanged} 名干员的技能、模组、潜能与练度恢复为默认配置？": "{nChanged}名のオペレーターのスキル・モジュール・潜在・育成度を初期設定に戻しますか？",
+  "已导入 {n} 名干员的潜能与练度": "{n}名のオペレーターの潜在と育成度をインポートしました",
+  "精英1": "昇進1",
+  "精英2": "昇進2",
+  "精英2 Lv.60": "昇進2 Lv60",
+  "开始模拟前可调整干员携带的技能与模组，以及潜能与练度；干员的局内等级不可调整": "シミュレーション開始前に、オペレーターのスキルとモジュール、潜在と育成度を調整できます（局内のオペレーターのレベルは変更不可）"
 }
@@ -1063,5 +1063,26 @@
  "自回": "자동",
  "常驻": "상시",
  "瞬发": "즉시",
-  "部署触发": "배치 시"
+  "部署触发": "배치 시",
+  "未精英化": "비정예화",
+  "精英阶段1": "1차 정예화",
+  "精英阶段2": "2차 정예화",
+  "精英阶段2-60级": "2차 정예화 Lv.60",
+  "潜能": "잠재",
+  "潜能 {n}": "잠재 {n}",
+  "练度": "육성도",
+  "潜能与练度": "잠재와 육성도",
+  "满潜能 · 精英2 Lv.60": "최대 잠재 · 2차 정예화 Lv.60",
+  "干员持有中标记为未持有：替补干员没有潜能与练度；这里的设置在改回「持有」后生效": "오퍼레이터 보유에서 미보유로 표시됨: 대체 오퍼레이터는 잠재와 육성도가 없습니다. 이 설정은 다시 '보유'로 바꾸면 적용됩니다",
+  "潜能取你自己的潜能；练度是自持有加成（已持有的同名干员的养成，攻击 / 防御 / 生命单独乘算）。未持有的特许干员按潜能1、未精英化。": "잠재는 자신의 잠재를 따릅니다. 육성도는 보유 오퍼레이터 보너스(같은 오퍼레이터의 육성도에 따른 공격 / 방어 / HP 별도 배율)입니다. 보유하지 않은 프리셋 오퍼레이터는 잠재 1, 비정예화입니다.",
+  "原型干员没有潜能与练度": "프로토타입 오퍼레이터는 잠재와 육성도가 없습니다",
+  "模组仅在精锐形态生效": "모듈은 정예화 형태에서만 적용됩니다",
+  "未持有（干员持有）：由替补干员上场，替补干员没有潜能与练度": "미보유(오퍼레이터 보유): 대체 오퍼레이터가 출전하며 잠재와 육성도가 없습니다",
+  "含潜能与练度；": "잠재와 육성도 포함. ",
+  "将 {nChanged} 名干员的技能、模组、潜能与练度恢复为默认配置？": "오퍼레이터 {nChanged}명의 스킬, 모듈, 잠재, 육성도를 기본 설정으로 되돌릴까요?",
+  "已导入 {n} 名干员的潜能与练度": "오퍼레이터 {n}명의 잠재와 육성도를 가져왔습니다",
+  "精英1": "정예 1",
+  "精英2": "정예 2",
+  "精英2 Lv.60": "정예 2 Lv.60",
+  "开始模拟前可调整干员携带的技能与模组，以及潜能与练度；干员的局内等级不可调整": "시뮬레이션 시작 전에 오퍼레이터의 스킬과 모듈, 잠재와 육성도를 조정할 수 있습니다. 게임 내 오퍼레이터 레벨은 조정할 수 없습니다."
 }
@@ -1065,5 +1065,26 @@
  "自回": "自回",
  "常驻": "常駐",
  "瞬发": "瞬發",
-  "部署触发": "部署觸發"
+  "部署触发": "部署觸發",
+  "未精英化": "未精英化",
+  "精英阶段1": "精英階段1",
+  "精英阶段2": "精英階段2",
+  "精英阶段2-60级": "精英階段2-60級",
+  "潜能": "潛能",
+  "潜能 {n}": "潛能 {n}",
+  "练度": "練度",
+  "潜能与练度": "潛能與練度",
+  "满潜能 · 精英2 Lv.60": "滿潛能 · 精英2 Lv.60",
+  "干员持有中标记为未持有：替补干员没有潜能与练度；这里的设置在改回「持有」后生效": "幹員持有中標記為未持有：替補幹員沒有潛能與練度；這裡的設定在改回「持有」後生效",
+  "潜能取你自己的潜能；练度是自持有加成（已持有的同名干员的养成，攻击 / 防御 / 生命单独乘算）。未持有的特许干员按潜能1、未精英化。": "潛能取你自己的潛能；練度是自持有加成（已持有的同名幹員的養成，攻擊 / 防禦 / 生命單獨乘算）。未持有的特許幹員按潛能1、未精英化。",
+  "原型干员没有潜能与练度": "原型幹員沒有潛能與練度",
+  "模组仅在精锐形态生效": "模組僅在精銳形態生效",
+  "未持有（干员持有）：由替补干员上场，替补干员没有潜能与练度": "未持有（幹員持有）：由替補幹員上場，替補幹員沒有潛能與練度",
+  "含潜能与练度；": "含潛能與練度；",
+  "将 {nChanged} 名干员的技能、模组、潜能与练度恢复为默认配置？": "將 {nChanged} 名幹員的技能、模組、潛能與練度恢復為預設配置？",
+  "已导入 {n} 名干员的潜能与练度": "已匯入 {n} 名幹員的潛能與練度",
+  "精英1": "精英1",
+  "精英2": "精英2",
+  "精英2 Lv.60": "精英2 Lv.60",
+  "开始模拟前可调整干员携带的技能与模组，以及潜能与练度；干员的局内等级不可调整": "開始模擬前可調整幹員攜帶的技能與模組，以及潛能與練度；幹員的局內等級不可調整"
 }
@@ -0,0 +1,94 @@
+// 潜能 / 练度 controls of the 干员调配 overlay (0.2.2, the owner's decision of 2026-10-08: 「调配干员里自己设置吧，默认满潜
+// 满加成」): per operator (by charId — the normal, elite and 自选 forms share them), 潜能 1–6 and the 自持有 练度 tier
+// (effects.json CHAR_MAP aceffect_char_1…4: 未精英化 / 精英阶段1 / 精英阶段2 / 精英阶段2-60级 — their official names and
+// texts, localized by the data overlay), default 潜能 6 / 精英阶段2-60级. Official: 调度手册 「卫戍协议中干员潜能由自身已
+// 持有干员潜能决定」 and 「提升已持有的干员，将为卫戍协议中同名的干员提供加成」 (an operator the player does not own fights
+// at 潜能 1 with no bonus: set by hand for a 特许 one; a NORMAL one not owned is its stand-in, which has neither).
+// CultivationSelects: two compact selects (a roster row, a 自选 slot card); CultivationSection: the detail's segmented
+// controls with the tier's effect. Hook-free views (the tests draw them). The settings live in ui/loadoutSync.js
+// (`ops`, synced with room.loadout); the model is ui/loadoutModel.js opsOf / setOps.
+
+import { html, MicroLabel } from '../ui/components.js';
+import { data } from '../data.js';
+import { opsOf } from '../ui/loadoutModel.js';
+import { CULTIVATE_EFFECTS, POTENTIAL_MIN, POTENTIAL_MAX } from '../../../shared/potential.js';
+import { t, N_ } from '../../../shared/i18n.js';
+
+const cx = (...p) => p.flat().filter(Boolean).join(' ');
+const POTENTIALS = Array.from({ length: POTENTIAL_MAX - POTENTIAL_MIN + 1 }, (_, i) => POTENTIAL_MIN + i);
+const TIERS = CULTIVATE_EFFECTS.map((_, i) => i);
+/** Names while effects.json is not loaded (msgids; the data's own names win). */
+const FALLBACK_NAMES = Object.freeze([N_('未精英化'), N_('精英阶段1'), N_('精英阶段2'), N_('精英阶段2-60级')]);
+/** The short names a row's select shows (the full official name is its title and the detail's). */
+const SHORT_NAMES = Object.freeze([N_('未精英化'), N_('精英1'), N_('精英2'), N_('精英2 Lv.60')]);
+
+/** The official name of 练度 tier `n` (effects.json `name`, localized), else its fallback. */
+export function cultivateName(n) {
+  return data.lookup('effects', CULTIVATE_EFFECTS[n])?.name || t(FALLBACK_NAMES[n] || '');
+}
+
+/** The official effect text of 练度 tier `n` (effects.json `desc`: 「攻击力、防御力和最大生命值+10%」 …), or ''. */
+export function cultivateDesc(n) {
+  return data.lookup('effects', CULTIVATE_EFFECTS[n])?.desc || '';
+}
+
+/**
+ * Two compact selects — 潜能 and 练度 — of operator `charId` under the stored settings `ops` (a roster row, a 自选 slot).
+ * @param {{ charId: string, ops: Record<string, any>, onSet: (charId: string, patch: { potential?: number, cultivate?: number }) => void,
+ *   note?: string|null }} props `note`: why the settings do not apply now (a 补位 stand-in), shown as the tooltip
+ */
+export function CultivationSelects({ charId, ops, onSet, note = null }) {
+  if (!charId) return null;
+  const cur = opsOf(ops, charId);
+  const set = (patch) => onSet(charId, patch);
+  // a setting off the default stands out (mint); the default stays quiet — it is the same on every row
+  return html`<span class=${cx('lo-cult', cur.changed && 'is-changed', note && 'is-moot')} data-char=${charId} title=${note || undefined}>
+    <span class=${cx('lo-select', 'lo-cult__sel', 'lo-cult__pot', cur.potential !== 6 && 'is-off')}>
+      <select value=${String(cur.potential)} aria-label=${t('潜能')} data-cult="potential"
+        onChange=${(e) => set({ potential: Number(e.currentTarget.value) })}>
+        ${POTENTIALS.map((n) => html`<option key=${n} value=${String(n)}>${t('潜能 {n}', { n })}</option>`)}
+      </select>
+    </span>
+    <span class=${cx('lo-select', 'lo-cult__sel', 'lo-cult__tier', cur.cultivate !== TIERS.length - 1 && 'is-off')} title=${note ? undefined : cultivateName(cur.cultivate)}>
+      <select value=${String(cur.cultivate)} aria-label=${t('练度')} data-cult="cultivate"
+        onChange=${(e) => set({ cultivate: Number(e.currentTarget.value) })}>
+        ${TIERS.map((n) => html`<option key=${n} value=${String(n)}>${t(SHORT_NAMES[n])}</option>`)}
+      </select>
+    </span>
+  </span>`;
+}
+
+/**
+ * The detail's 潜能 / 练度 section: 潜能 1–6 and the four 练度 tiers as segmented buttons, the tier's official effect,
+ * the rule in one line, and — for a chess the player marked not owned — that its stand-in has neither.
+ * @param {{ charId: string, ops: Record<string, any>, onSet: (charId: string, patch: object) => void, standIn?: boolean }} props
+ */
+export function CultivationSection({ charId, ops, onSet, standIn = false }) {
+  if (!charId) return null;
+  const cur = opsOf(ops, charId);
+  const set = (patch) => onSet(charId, patch);
+  return html`<section class=${cx('lo-sec', 'lo-sec--cult', standIn && 'is-moot')} aria-label=${t('潜能与练度')} data-char=${charId}>
+    <header class="lo-sec__head">
+      <h3>${t('潜能与练度')}<${MicroLabel}>POTENTIAL<//></h3>
+      ${cur.changed ? html`<span class="lo-badge lo-badge--changed">${t('已调整')}</span>` : html`<span class="lo-badge lo-badge--plain">${t('满潜能 · 精英2 Lv.60')}</span>`}
+    </header>
+    <div class="lo-cult__row">
+      <span class="lo-cult__k">${t('潜能')}</span>
+      <div class="lo-seg lo-seg--pot" role="radiogroup" aria-label=${t('潜能')}>
+        ${POTENTIALS.map((n) => html`<button key=${n} type="button" role="radio" aria-checked=${cur.potential === n ? 'true' : 'false'}
+          class=${cx(cur.potential === n && 'is-on')} data-potential=${n} onClick=${() => set({ potential: n })}><span class="num">${n}</span></button>`)}
+      </div>
+    </div>
+    <div class="lo-cult__row">
+      <span class="lo-cult__k">${t('练度')}</span>
+      <div class="lo-seg lo-seg--tier" role="radiogroup" aria-label=${t('练度')}>
+        ${TIERS.map((n) => html`<button key=${n} type="button" role="radio" aria-checked=${cur.cultivate === n ? 'true' : 'false'}
+          class=${cx(cur.cultivate === n && 'is-on')} data-cultivate=${n} onClick=${() => set({ cultivate: n })}>${cultivateName(n)}</button>`)}
+      </div>
+    </div>
+    <p class="lo-cult__eff" data-cultivate=${cur.cultivate}><b>${cultivateName(cur.cultivate)}</b> <span>${cultivateDesc(cur.cultivate)}</span></p>
+    <p class="lo-cult__note">${standIn
+      ? t('干员持有中标记为未持有：替补干员没有潜能与练度；这里的设置在改回「持有」后生效')
+      : t('潜能取你自己的潜能；练度是自持有加成（已持有的同名干员的养成，攻击 / 防御 / 生命单独乘算）。未持有的特许干员按潜能1、未精英化。')}</p>
+  </section>`;
+}
@@ -6,7 +6,8 @@
 // 原型 / 已持有 tag —, an operator held by another slot greyed out with where it is. In the match the operator is sold
 // only in this player's shop, from 调度中心 level 5 (tier 5) / 6 (tier 6), and fights with the pick (server/match/player
 // /diy.js). Out of match: the next match takes the picks. The picks live in ui/loadoutSync.js (localStorage + room.diy);
-// the model is ui/diyModel.js. Styles: css/screens/loadout.css (diy-*).
+// the model is ui/diyModel.js. Styles: css/screens/loadout.css (diy-*). An owned pick's card carries its operator's 潜能 /
+// 练度 selects (0.2.2, screens/cultivation.js — the same per-operator settings as 干员调配, `ops`); a prototype has neither.

 import { useEffect, useState } from '../../vendor/hooks.module.js';
 import { html, Icon, Button, TierChip } from '../ui/components.js';
@@ -15,6 +16,7 @@ import { chessAvatarUrl, chessPortraitUrl, profIconUrl, skillRecordIconUrl, modu
 import { data } from '../data.js';
 import { PROF_NAME, skillLabel, moduleBadge, fullTraitText } from '../ui/loadoutModel.js';
 import { diySlotList, pickChoices, pickOptions, slotRecord, defaultPick } from '../ui/diyModel.js';
+import { CultivationSelects } from './cultivation.js';
 import { t } from '../../../shared/i18n.js';

 const cx = (...p) => p.flat().filter(Boolean).join(' ');
@@ -38,8 +40,8 @@ function Bonds({ bonds }) {
  return html`<span class="diy-bonds">${(bonds || []).map((b) => html`<span key=${b} class="diy-bond"><${BondGlyph} bondId=${b} /><span>${bondName(b)}</span></span>`)}</span>`;
 }

-/** One slot: the pick (operator, class, bonds, skill, module) or an empty slot to fill. */
-function SlotCard({ m, slot, pick, illegal, onOpen, onClear }) {
+/** One slot: the pick (operator, class, bonds, skill, module, an owned pick's 潜能 / 练度) or an empty slot to fill. */
+function SlotCard({ m, slot, pick, illegal, onOpen, onClear, ops = {}, onOps = null }) {
  const D = diyData();
  const rec = pick ? slotRecord(slot.slotId, pick, D) : null;
  const elite = pick ? slotRecord(slot.slotId, pick, D, { elite: true }) : null;
@@ -73,6 +75,8 @@ function SlotCard({ m, slot, pick, illegal, onOpen, onClear }) {
        ${mod ? html`<${Img} src=${moduleTypeIconUrl(data.get('local'), mod.type)} class="diy-slot__micon" fallback=${html`<b class="num">${moduleBadge({ typeName: mod.type })}</b>`} />` : html`<span class="diy-slot__micon diy-slot__micon--none">—</span>`}
        <span>${mod ? html`<b class="num">${mod.type || ''}</b> ${mod.name || ''}` : t('不装备模组')} <small class="t-dim">${t('（精锐时生效）')}</small></span>
      </span>
+      ${proto ? html`<small class="diy-slot__cult t-dim">${t('原型干员没有潜能与练度')}</small>`
+        : onOps ? html`<span class="diy-slot__cult"><${CultivationSelects} charId=${rec.charId} ops=${ops} onSet=${onOps} /></span>` : null}
      ${illegal ? html`<p class="diy-slot__bad"><${Icon} name="warn" />${t('这项自选在当前版本不可用，开局时会被移除')}</p>` : null}
    </div>
    <div class="diy-slot__acts">
@@ -226,7 +230,9 @@ export function DiyPickerView({ m, slot, picks, kitted, onDone, onClose, filter,
 /**
 * The tab's body: the four slots by tier, and the picker of the slot being filled (`picking`, kept here).
 * @param {{ m: any, picks: Record<string, any>, legal: Record<string, any>, kitted: string[]|null,
- *   onSet: (slotId: string, pick: any) => void }} props
+ *   onSet: (slotId: string, pick: any) => void, ops?: Record<string, any>,
+ *   onOps?: ((charId: string, patch: { potential?: number, cultivate?: number }) => void) | null }} props
+ *   `ops` / `onOps`: the stored 潜能 / 练度 and their setter (0.2.2 — an owned pick's card shows its selects)
 */
 export function DiyPanel(props) {
  const [picking, setPicking] = useState(null);
@@ -234,7 +240,7 @@ export function DiyPanel(props) {
 }

 /** The tab's view (no hooks: the tests draw it): `picking` = the slot being filled, or null. */
-export function DiyPanelView({ m, picks, legal, kitted, onSet, picking, onPicking: setPicking }) {
+export function DiyPanelView({ m, picks, legal, kitted, onSet, picking, onPicking: setPicking, ops = {}, onOps = null }) {
  const slots = diySlotList(diyData());
  const slot = picking ? slots.find((s) => s.slotId === picking) : null;
  const tiers = [...new Set(slots.map((s) => s.tier))];
@@ -247,7 +253,7 @@ export function DiyPanelView({ m, picks, legal, kitted, onSet, picking, onPickin
        <h3 class="own-tier__head"><${TierChip} tier=${tier} size="sm" /><span class="num">${ROMAN[tier]}</span><span>${t('阶')}</span></h3>
        <div class="diy-grid">
          ${slots.filter((s) => s.tier === tier).map((s) => html`<${SlotCard} key=${s.slotId} m=${m} slot=${s} pick=${picks[s.slotId] || null}
-            illegal=${!!picks[s.slotId] && !legal[s.slotId]} onOpen=${setPicking} onClear=${(id) => onSet(id, null)} />`)}
+            illegal=${!!picks[s.slotId] && !legal[s.slotId]} onOpen=${setPicking} onClear=${(id) => onSet(id, null)} ops=${ops} onOps=${onOps} />`)}
        </div>
      </section>`)}
    </div>
@@ -5,12 +5,16 @@
 // present: operator_preset, image_skill_select_outline, skill_select_deco, icon_equip_non; the module type icons of
 // groups.module — lettered tiles without them).
 //
-// Left: roster of the 112 visible chess (tier / class / bond filters, search, 仅看已调整) — each card shows the equipped
-// skill (S1–S3) and, when changed, the elite's module badge. Right: the selected chess — skills (icon, name, 默认,
+// Left: the 112 visible chess as one list (tier / class / bond filters, search, 仅看已调整) — a row per operator, its columns
+// aligned (0.2.2; the quick choices of PR #301 by @farridge, laid out as one list instead of three columns of cards — the
+// owner's decision of 2026-10-08): portrait, name and bonds (a click opens the detail), the skills and the elite's modules
+// to tap (不装备 first), the 潜能 and 练度 selects (screens/cultivation.js). Right: the selected chess — its 潜能 / 练度,
+// its 特质 (the in-match card's block, PR #301), skills (icon, name, 默认,
 // SP recovery, 初始 / 消耗 SP, duration, description at 普通 Lv.4 or 精锐 Lv.7), 局内数值 (the stats, 攻击范围, 特性 and
 // 天赋 the chosen variant — 精锐 first, 普通 on the toggle — fights with under the chosen skill and module: the detail
 // card's own block and pure functions, GitHub issue #64) and the elite's modules (不装备 / X / Y … with the stat bonus,
-// the trait upgrade and the talent changes), 恢复默认; 全部恢复默认 in the top bar.
+// the trait upgrade and the talent changes), 恢复默认; 全部恢复默认 in the top bar. The detail's 普通 / 精锐 skill toggle is one
+// preview for the skills, the 特质 and the rows' skill details (display only: never stored).
 // The loadout lives in ui/loadoutSync.js (localStorage + room.loadout); the model is ui/loadoutModel.js.
 // The second tab, 干员持有 (0.2.0 补位, screens/ownership.js): which NORMAL chess the player owns — a chess marked 未持有 is
 // deployed as its official stand-in (room.ownership; ui/ownershipModel.js) — with its own 导出 / 导入 / 全部持有.
@@ -29,9 +33,12 @@ import { useStore } from '../store.js';
 import { PHASE } from '../../../shared/constants.js';
 import {
  MODULE_NONE, PROF_ORDER, PROF_NAME, rosterOf, filterRoster, recordsOf, chessOptions, effectiveChoice, setChoice, resetChoice,
-  changedCount, skillLabel, moduleBadge, attrRows, skillTags, traitLines, serializeExport, parseImport, LOADOUT_IMPORT_MAX_BYTES,
+  changedCount, skillLabel, moduleBadge, attrRows, skillTags, quickSkillTags, traitLines, serializeExport, parseImport, LOADOUT_IMPORT_MAX_BYTES,
+  opsOf, setOps, resetOps,
 } from '../ui/loadoutModel.js';
-import { loadoutStore, openLoadout, closeLoadout, setEntries, applyLoadoutEntries, setNotOwned, applyOwnershipImport, setDiyPicks, applyDiyImport } from '../ui/loadoutSync.js';
+import { loadoutStore, openLoadout, closeLoadout, setEntries, setOpsMap, applyLoadoutEntries, setNotOwned, applyOwnershipImport, setDiyPicks, applyDiyImport } from '../ui/loadoutSync.js';
+import { CultivationSelects, CultivationSection } from './cultivation.js';
+import { cultivationCharIds } from '../../../shared/protocol.js';
 import { setOwned, notOwnedCount, serializeOwnership, parseOwnershipImport, OWNERSHIP_IMPORT_MAX_BYTES } from '../ui/ownershipModel.js';
 import { OwnershipPanel, useOwnershipRoster } from './ownership.js';
 import { DiyPanel, diyData } from './diy.js';
@@ -140,34 +147,84 @@ export function ModuleGlyph({ m, rec, id, size = 'md' }) {
  </span>`;
 }

-// ---- roster card ---------------------------------------------------------------------------------------------------
+// ---- roster rows -----------------------------------------------------------------------------------------------------
+//
+// One list, one row per operator, its columns aligned (the head row names them): the quick choices of PR #301 (by
+// @farridge) without its three columns of cards. Every row is the same few columns — tap a skill, a module, a 潜能 / 练度 —
+// so the eye runs down a column; the portrait and name open the detail (on a phone it slides over; a quick choice keeps
+// the list). Hook-free (the tests draw it).

-function RosterCard({ m, chess, golden, entries, selected, onPick, notOwned = false }) {
+/** One skill to tap: its icon, the equipped one ringed; the label / tooltip says slot, name, SP and duration (quickSkillTags). */
+function QuickSkill({ m, opt, on, elite, onPick }) {
+  const rec = elite ? opt.elite || opt.normal : opt.normal || opt.elite;
+  const tags = quickSkillTags(rec);
+  const label = `${skillLabel(opt.index)} · ${rec?.name || t('未知技能')} · ${tags.sp} · ${t('初始')} ${tags.init ?? '—'} / ${t('消耗')} ${tags.cost ?? '—'} · ${t('持续')} ${tags.duration}`;
+  return html`<button type="button" class=${cx('lo-q', 'lo-q--skill', on && 'is-on')} data-skill=${opt.index} aria-pressed=${on ? 'true' : 'false'}
+      aria-label=${label} title=${label} onClick=${() => onPick(opt.index)}>
+    <${SkillIcon} m=${m} rec=${rec} index=${opt.index} on=${on} size="q" />
+  </button>`;
+}
+
+/** One module to tap (不装备 first): the type icon with its letter in the corner; the elite's equipped one ringed. */
+function QuickModule({ m, opt, on, onPick }) {
+  const label = opt.id === MODULE_NONE ? t('不装备模组') : `${opt.rec?.typeName || ''} · ${opt.rec?.name || opt.id}`;
+  return html`<button type="button" class=${cx('lo-q', 'lo-q--mod', on && 'is-on')} data-module=${opt.id} aria-pressed=${on ? 'true' : 'false'}
+      aria-label=${label} title=${label} onClick=${() => onPick(opt.id)}>
+    <${ModuleGlyph} m=${m} rec=${opt.rec} id=${opt.id} size="q" />
+    ${opt.id !== MODULE_NONE ? html`<b class="lo-q__type num" aria-hidden="true">${moduleBadge(opt.rec, opt.id)}</b>` : null}
+  </button>`;
+}
+
+/** The list's column heads (the rows share its grid). */
+export function RosterHead() {
+  return html`<div class="lo-list__head" aria-hidden="true">
+    <span class="lo-list__h lo-list__h--op">${t('干员')}</span>
+    <span class="lo-list__h lo-list__h--skills">${t('技能')}</span>
+    <span class="lo-list__h lo-list__h--mods" title=${t('模组仅在精锐形态生效')}>${t('模组')}<small>${t('精锐')}</small></span>
+    <span class="lo-list__h lo-list__h--cult">${t('潜能')} · ${t('练度')}</span>
+  </div>`;
+}
+
+/**
+ * One operator's row (`.lo-card`, like the cards before it): portrait + name + bonds (`.lo-card__pick`: selects it, opens
+ * the detail), three skill slots (an empty one when the chess has two skills), the elite's modules, the 潜能 / 练度 selects.
+ * `level` 'elite': the skills' details at 精锐 Lv.7 (the shared preview). A chess marked not owned (干员持有) shows the
+ * 「替补」 tag: its stand-in fights with a fixed skill and no 潜能 / 练度, the choices here apply once it is owned again.
+ */
+export function RosterRow({ m, chess, golden, entries, ops = {}, selected, onPick, onChange, onOps, level = 'normal', notOwned = false }) {
  const choice = effectiveChoice(entries, chess, golden);
  const opt = chessOptions(chess, golden);
-  const skillRec = opt.skillOptions.find((s) => s.index === choice.skill)?.normal || chess.skill;
-  const modRec = golden && choice.module !== MODULE_NONE ? opt.moduleOptions.find((x) => x.id === choice.module)?.rec || null : null;
-  const modChanged = golden && choice.module !== opt.defaultModule;
-  return html`<button type="button" role="option" aria-selected=${selected ? 'true' : 'false'} data-chess=${chess.chessId}
-      class=${cx('lo-card', `lo-card--t${chess.tier}`, selected && 'is-sel', choice.changed && 'is-changed')} onClick=${() => onPick(chess.chessId)}
-      title=${`${chess.name} · ${skillRec?.name || ''}`}>
-    <span class="lo-card__art">
-      <${Img} src=${chessAvatarUrl(m, chess)} fallback=${html`<span class="lo-card__glyph">${[...(chess.name || '?')][0]}</span>`} />
-    </span>
-    <${TierChip} tier=${chess.tier} size="sm" class="lo-card__tier" />
-    ${choice.changed ? html`<span class="lo-card__flag" aria-label=${t('已调整')}></span>` : null}
-    ${notOwned ? html`<span class="lo-card__sub" title=${t('未持有（干员持有）：由替补干员上场')} aria-label=${t('未持有')}>${t('替补')}</span>` : null}
-    <span class="lo-card__name">${chess.name}</span>
-    <span class="lo-card__kit">
-      <span class=${cx('lo-card__sk', choice.skill !== opt.defaultSkill && 'is-alt')}>
-        <${SkillIcon} m=${m} rec=${skillRec} index=${choice.skill} size="xs" />
-        <b class="num">${skillLabel(choice.skill)}</b>
+  const cv = opsOf(ops, chess.charId);
+  const changed = choice.changed || cv.changed;
+  const modules = [...opt.moduleOptions].sort((a, b) => Number(b.id === MODULE_NONE) - Number(a.id === MODULE_NONE));
+  const elite = level === 'elite' && !!golden;
+  const slots = [0, 1, 2].map((i) => opt.skillOptions[i] || null);
+  const standInNote = notOwned ? t('未持有（干员持有）：由替补干员上场，替补干员没有潜能与练度') : null;
+  return html`<div role="listitem" data-chess=${chess.chessId} data-variant=${elite ? 'elite' : 'normal'}
+      class=${cx('lo-card', `lo-card--t${chess.tier}`, selected && 'is-sel', changed && 'is-changed', notOwned && 'is-standin')}>
+    <button type="button" class="lo-card__pick" aria-pressed=${selected ? 'true' : 'false'} title=${chess.name} onClick=${() => onPick(chess.chessId)}>
+      <span class="lo-card__art">
+        <${Img} src=${chessAvatarUrl(m, chess)} fallback=${html`<span class="lo-card__glyph">${[...(chess.name || '?')][0]}</span>`} />
+        <${TierChip} tier=${chess.tier} size="sm" class="lo-card__tier" />
      </span>
-      ${golden ? html`<span class=${cx('lo-card__mod', modChanged && 'is-alt')} title=${modRec ? `${modRec.typeName} ${modRec.name}` : t('不装备模组')}>
-        ${choice.module === MODULE_NONE ? '—' : moduleBadge(modRec)}
-      </span>` : null}
-    </span>
-  </button>`;
+      <span class="lo-card__id">
+        <span class="lo-card__name">${chess.name}</span>
+        <span class="lo-card__bonds">${(chess.bonds || []).map((b) => html`<${Img} key=${b} src=${bondIconUrl(m, b)} class="lo-card__bond"
+          alt=${data.lookup('bonds', b)?.name || b} fallback=${html`<i class="lo-bond__dot" title=${data.lookup('bonds', b)?.name || b}></i>`} />`)}</span>
+        ${notOwned ? html`<span class="lo-card__sub" title=${t('未持有（干员持有）：由替补干员上场')}>${t('替补')}</span>` : null}
+      </span>
+    </button>
+    ${changed ? html`<span class="lo-card__flag" aria-label=${t('已调整')}></span>` : null}
+    <div class="lo-card__skills lo-quick" role="group" aria-label=${t('选择技能')}>
+      ${slots.map((sk, i) => (sk ? html`<${QuickSkill} key=${sk.index} m=${m} opt=${sk} elite=${elite} on=${sk.index === choice.skill}
+        onPick=${(skill) => onChange(chess.chessId, { skill })} />` : html`<span key=${`e${i}`} class="lo-q lo-q--empty" aria-hidden="true"></span>`))}
+    </div>
+    <div class="lo-card__mods lo-quick" role="group" aria-label=${t('选择模组')} title=${t('模组仅在精锐形态生效')}>
+      ${golden ? modules.map((mo) => html`<${QuickModule} key=${mo.id} m=${m} opt=${mo} on=${mo.id === choice.module}
+        onPick=${(module) => onChange(chess.chessId, { module })} />`) : null}
+    </div>
+    <${CultivationSelects} charId=${chess.charId} ops=${ops} onSet=${onOps} note=${standInNote} />
+  </div>`;
 }

 // ---- detail --------------------------------------------------------------------------------------------------------------
@@ -248,13 +305,15 @@ const standInName = (chess) => data.get('backups')?.units?.[chess?.backup?.charI
 * @param {any} base normal chess record @param {any} golden its elite record or null
 * @param {Record<string, any>} entries the stored loadout @param {'normal'|'elite'} level
 * @param {(id: string) => any} getChess
+ * @param {Record<string, any>|null} [ops] the stored 潜能 / 练度 (0.2.2: the numbers at the operator's settings — the
+ *   练度 multiplier needs effects.json; none set = 潜能 6, 精英2 Lv.60)
 * @returns {{ elite: boolean, chess: any, lo: any, record: any, trait: string, talents: any[] } | null} null without a record
 */
-export function statsPreview(base, golden, entries, level, getChess) {
+export function statsPreview(base, golden, entries, level, getChess, ops = null) {
  const elite = level === 'elite' && !!golden;
  const chess = elite ? golden : base;
  if (!chess) return null;
-  const lo = chessLoadout(chess, entries, getChess);
+  const lo = chessLoadout(chess, entries, getChess, { ops, effects: data.get('effects') });
  const record = lo?.record || chess;
  // (the card's own rule: the 特性 line exists when the chess has one; its text follows the chosen module)
  return { elite, chess, lo, record, trait: chess.trait?.desc ? traitText(chess, !!chess.isGolden, lo) || '' : '', talents: chessTalents(record) };
@@ -267,9 +326,10 @@ export function statsPreview(base, golden, entries, level, getChess) {
 * toggle picks the 普通 or the 精锐 record; 精锐 is the default because the module only exists there.
 * @param {{ base: any, golden: any, entries: Record<string, any>, level: 'normal'|'elite', onLevel: (l: 'normal'|'elite') => void, getChess?: (id: string) => any }} props
 */
-export function LoadoutStats({ base, golden, entries, level, onLevel, getChess = getChessRec }) {
-  const pv = statsPreview(base, golden, entries, level, getChess);
+export function LoadoutStats({ base, golden, entries, level, onLevel, getChess = getChessRec, ops = null }) {
+  const pv = statsPreview(base, golden, entries, level, getChess, ops);
  if (!pv) return null;
+  // (the caption names 潜能 / 练度 when the numbers carry both — the 练度 multiplier needs effects.json)
  return html`<section class="lo-sec lo-sec--stats" aria-label=${t('局内数值')} data-variant=${pv.elite ? 'elite' : 'normal'}>
    <header class="lo-sec__head">
      <h3>${t('局内数值')}<${MicroLabel}>STATS<//></h3>
@@ -284,18 +344,19 @@ export function LoadoutStats({ base, golden, entries, level, onLevel, getChess =
      ${pv.talents.map((tal, i) => html`<div key=${i} class="lo-minfo__row"><span class="lo-minfo__k">${t('天赋')}</span>
        <span class="lo-minfo__v"><b class="lo-minfo__tname">${tal.name}</b><${RichText} text=${tal.descRaw || tal.desc || ''} /></span></div>`)}
    </div>` : null}
-    <p class="lo-stats__cap">${pv.elite ? t('数值含所选模组；') : golden ? t('普通干员没有模组，所选模组在「精锐」中生效；') : ''}${t('不含技能发动、装备、盟约等局内加成')}</p>
+    <p class="lo-stats__cap">${pv.elite ? t('数值含所选模组；') : golden ? t('普通干员没有模组，所选模组在「精锐」中生效；') : ''}${pv.lo?.cultivation && data.get('effects') ? t('含潜能与练度；') : ''}${t('不含技能发动、装备、盟约等局内加成')}</p>
  </section>`;
 }

-function Detail({ m, chess, golden, entries, onChange, onReset, locked, notOwned = false }) {
-  const [level, setLevel] = useState('normal');
+function Detail({ m, chess, golden, entries, ops = {}, onChange, onOps, onReset, locked, level = 'normal', onLevel, notOwned = false }) {
  const [statLevel, setStatLevel] = useState('elite'); // 局内数值: the 精锐 shows the chosen module's effect
+  const setLevel = onLevel;
  const bodyRef = useRef(null);
  useEffect(() => { if (bodyRef.current) bodyRef.current.scrollTop = 0; }, [chess?.chessId]);
  if (!chess) return html`<aside class="lo-detail lo-detail--empty"><p class="t-dim">${t('没有符合条件的干员')}</p></aside>`;
  const opt = chessOptions(chess, golden);
  const choice = effectiveChoice(entries, chess, golden);
+  const changed = choice.changed || opsOf(ops, chess.charId).changed;
  const modOpt = opt.moduleOptions.find((x) => x.id === choice.module) || null;
  const lv = (c) => c?.status?.skillLevel ?? '—';
  return html`<aside class="lo-detail" aria-label=${t('{name} 调配', { name: chess.name })}>
@@ -305,7 +366,7 @@ function Detail({ m, chess, golden, entries, onChange, onReset, locked, notOwned
      </div>
      <div class="lo-dhead__info">
        <div class="lo-dhead__chips"><${TierChip} tier=${chess.tier} size="md" />
-          ${choice.changed ? html`<span class="lo-badge lo-badge--changed">${t('已调整')}</span>` : html`<span class="lo-badge lo-badge--plain">${t('默认配置')}</span>`}</div>
+          ${changed ? html`<span class="lo-badge lo-badge--changed">${t('已调整')}</span>` : html`<span class="lo-badge lo-badge--plain">${t('默认配置')}</span>`}</div>
        <h2 class="lo-dhead__name">${chess.name}</h2>
        <span class="lo-dhead__en">${chess.appellation || ''}</span>
        <span class="lo-dhead__class">
@@ -315,9 +376,10 @@ function Detail({ m, chess, golden, entries, onChange, onReset, locked, notOwned
        <span class="lo-dhead__bonds">${(chess.bonds || []).map((b) => html`<span key=${b} class="lo-bond">
          <${Img} src=${bondIconUrl(m, b)} class="lo-bond__icon" fallback=${html`<i class="lo-bond__dot"></i>`} />${data.lookup('bonds', b)?.name || b}</span>`)}</span>
      </div>
-      <${Button} variant="ghost" size="sm" icon="refresh" class="lo-dhead__reset" disabled=${!choice.changed} onClick=${onReset}>${t('恢复默认')}<//>
+      <${Button} variant="ghost" size="sm" icon="refresh" class="lo-dhead__reset" disabled=${!changed} onClick=${onReset}>${t('恢复默认')}<//>
    </div>
    <div class="lo-detail__body" ref=${bodyRef}>
+      <${CultivationSection} charId=${chess.charId} ops=${ops} onSet=${onOps} standIn=${notOwned} />
      <${LoadoutGarrisons} chess=${level === 'elite' && golden ? golden : chess} m=${m} />
      <section class="lo-sec">
        <header class="lo-sec__head">
@@ -332,7 +394,7 @@ function Detail({ m, chess, golden, entries, onChange, onReset, locked, notOwned
            onPick=${(i) => onChange({ skill: i })} />`)}
        </div>
      </section>
-      <${LoadoutStats} base=${chess} golden=${golden} entries=${entries} level=${statLevel} onLevel=${setStatLevel} />
+      <${LoadoutStats} base=${chess} golden=${golden} entries=${entries} ops=${ops} level=${statLevel} onLevel=${setStatLevel} />
      ${golden ? html`<section class="lo-sec lo-sec--mod">
        <header class="lo-sec__head">
          <h3>${t('模组')}<${MicroLabel}>MODULE<//></h3>
@@ -442,7 +504,7 @@ export function DataMissing({ files }) {

 /** The overlay screen. */
 function LoadoutScreen({ st }) {
-  const ready = useData('chess', 'bonds', 'assets', 'local', 'backups', 'garrisons');
+  const ready = useData('chess', 'bonds', 'assets', 'local', 'backups', 'garrisons', 'effects');
  const phase = useStore((s) => s.match?.public?.phase || null);
  const inMatch = useStore((s) => !!s.room?.inMatch);
  // co-op briefing (INFO_CHECK, 25 s): the overlay covers the briefing's own countdown, so it shows the time left — the
@@ -457,14 +519,16 @@ function LoadoutScreen({ st }) {
    return (data.list('bonds') || []).filter((b) => b && used.has(b.bondId))
      .sort((a, b) => (b.isCore ? 1 : 0) - (a.isCore ? 1 : 0) || (a.bondOrder ?? 0) - (b.bondOrder ?? 0) || String(a.name).localeCompare(String(b.name), 'zh'));
  }, [ready, roster]);
-  const list = filterRoster(roster, st.filters, st.entries, getChess, getBond);
+  const list = filterRoster(roster, st.filters, st.entries, getChess, getBond, st.ops);
  const selId = st.sel && roster.some((c) => c.chessId === st.sel) ? st.sel : list[0]?.chessId || roster[0]?.chessId || null;
  const { base, golden } = selId ? recordsOf(selId, getChess) : { base: null, golden: null };
-  const nChanged = changedCount(st.entries, getChess);
+  const nChanged = changedCount(st.entries, getChess, st.ops, roster);
  const locked = (inMatch && phase && phase !== PHASE.INFO_CHECK && phase !== PHASE.LOBBY) || st.sync === 'locked';
  const gridRef = useRef(null);
  const fileRef = useRef(null);                            // hidden <input type=file> of the 导入 dialog
  const [narrowDetail, setNarrowDetail] = useState(false); // phones: the detail slides over the roster
+  // the detail's 普通 / 精锐 skill toggle: one preview for its skills, its 特质 and the rows' skill details (display only)
+  const [previewLevel, setPreviewLevel] = useState('normal');
  const [io, setIo] = useState(null);                      // 导出 / 导入 dialog: { mode, text } | null

  const tab = st.tab === 'ownership' || st.tab === 'diy' ? st.tab : 'loadout';
@@ -488,12 +552,30 @@ function LoadoutScreen({ st }) {
    if (ok) setNotOwned([]);
  };
  const pick = (id) => { loadoutStore.set({ sel: id }); setNarrowDetail(true); };
+  // a row's quick choice (PR #301): the same setChoice / setEntries path; the row becomes the selection, a phone stays on the list
+  const quickChange = (id, patch) => {
+    const recs = recordsOf(id, getChess);
+    setEntries(setChoice(loadoutStore.get().entries, recs.base, recs.golden, patch));
+    loadoutStore.set({ sel: id });
+  };
  const change = (patch) => { if (base) setEntries(setChoice(loadoutStore.get().entries, base, golden, patch)); };
-  const resetOne = () => { if (base) setEntries(resetChoice(loadoutStore.get().entries, base.chessId)); };
+  // 0.2.2: an operator's 潜能 / 练度 (by charId: its normal, elite and 自选 forms share them)
+  const setOpsOf = (charId, patch) => setOpsMap(setOps(loadoutStore.get().ops, charId, patch));
+  const resetOne = () => {
+    if (!base) return;
+    setOpsMap(resetOps(loadoutStore.get().ops, base.charId));
+    setEntries(resetChoice(loadoutStore.get().entries, base.chessId));
+  };
  const resetAll = async () => {
    if (!nChanged) return;
-    const ok = await confirmDialog({ title: t('全部恢复默认'), text: t('将 {nChanged} 名干员的技能与模组恢复为默认配置？', { nChanged }), okText: t('恢复默认'), danger: true });
-    if (ok) setEntries({});
+    const ok = await confirmDialog({ title: t('全部恢复默认'), text: t('将 {nChanged} 名干员的技能、模组、潜能与练度恢复为默认配置？', { nChanged }), okText: t('恢复默认'), danger: true });
+    if (!ok) return;
+    // the roster's operators only: a 自选 pick's settings belong to the 自选编队 tab
+    const rosterChars = new Set(roster.map((c) => c.charId));
+    const keep = {};
+    for (const [id, e] of Object.entries(loadoutStore.get().ops || {})) if (!rosterChars.has(id)) keep[id] = e;
+    setOpsMap(keep);
+    setEntries({});
  };

  // 导出 / 导入 the loadout (or, on the 干员持有 tab, the not-owned list) as the versioned payload (a downloaded file,
@@ -504,7 +586,7 @@ function LoadoutScreen({ st }) {
  const openExport = () => setIo(tab === 'ownership'
    ? { mode: 'export', kind: 'ownership', text: serializeOwnership(loadoutStore.get().notOwned) }
    : tab === 'diy' ? { mode: 'export', kind: 'diy', text: serializeDiy(loadoutStore.get().diy) }
-      : { mode: 'export', kind: 'loadout', text: serializeExport(loadoutStore.get().entries) });
+      : { mode: 'export', kind: 'loadout', text: serializeExport(loadoutStore.get().entries, { ops: loadoutStore.get().ops }) });
  const openImport = () => setIo({ mode: 'import', kind: tab, text: '' });
  const ioCopy = async () => {
    const ok = await copyText(ioText);
@@ -545,13 +627,17 @@ function LoadoutScreen({ st }) {
    }
    const res = parseImport(ioText);
    if (!res.ok) { toast(t('导入失败：{error}', { error: res.error }), 'error'); return; }
-    const { applied, dropped } = applyLoadoutEntries(res.entries, getChess);
+    // 0.2.2: a payload with `ops` replaces the 潜能 / 练度 too (an older export leaves them alone)
+    const opIds = res.ops ? cultivationCharIds(data.get('chess'), data.get('backups')) : null;
+    const r = applyLoadoutEntries(res.entries, getChess, res.ops ? { ops: res.ops, isOperator: (id) => opIds.has(id) } : {});
+    const { applied, dropped } = r;
+    const nOps = r.ops ?? 0;
    // nothing survived sanitising (unknown chess, or every choice already the default): keep the current loadout
-    if (!applied) { toast(t('导入失败：这份数据在当前版本没有可用的调配，未做任何改动'), 'error'); return; }
+    if (!applied && !nOps) { toast(t('导入失败：这份数据在当前版本没有可用的调配，未做任何改动'), 'error'); return; }
    setIo(null);
-    toast(dropped
-      ? t('已导入 {applied} 名干员（另有 {dropped} 项未导入）', { applied, dropped })
-      : t('已导入 {applied} 名干员的调配', { applied }), dropped ? 'warn' : 'success');
+    toast(!applied ? t('已导入 {n} 名干员的潜能与练度', { n: nOps })
+      : dropped ? t('已导入 {applied} 名干员（另有 {dropped} 项未导入）', { applied, dropped })
+        : t('已导入 {applied} 名干员的调配', { applied }), dropped ? 'warn' : 'success');
  };

  // Esc closes; ←/→ browse the filtered roster (not while typing in the search field)
@@ -563,8 +649,10 @@ function LoadoutScreen({ st }) {
      const typing = e.target && /^(INPUT|SELECT|TEXTAREA)$/.test(e.target.tagName);
      if (e.key === 'Escape') { e.preventDefault(); e.stopImmediatePropagation(); closeLoadout(); return; }
      if (typing) return;
+      // (a row's quick choices: ←/→ stay with the focused group, PR #301)
+      if (e.target?.closest?.('.lo-quick') && (e.key === 'ArrowRight' || e.key === 'ArrowLeft')) return;
      if ((e.key === 'ArrowRight' || e.key === 'ArrowLeft') && loadoutStore.get().tab !== 'ownership' && loadoutStore.get().tab !== 'diy') {
-        const ids = filterRoster(rosterOf(data.list('chess')), loadoutStore.get().filters, loadoutStore.get().entries, getChess, getBond).map((c) => c.chessId);
+        const ids = filterRoster(rosterOf(data.list('chess')), loadoutStore.get().filters, loadoutStore.get().entries, getChess, getBond, loadoutStore.get().ops).map((c) => c.chessId);
        if (!ids.length) return;
        const cur = Math.max(0, ids.indexOf(loadoutStore.get().sel));
        const next = ids[(cur + (e.key === 'ArrowRight' ? 1 : -1) + ids.length) % ids.length];
@@ -586,7 +674,7 @@ function LoadoutScreen({ st }) {

  const [syncText, syncCls] = tab === 'ownership' ? OWN_SYNC_TEXT[st.ownSync] || OWN_SYNC_TEXT.idle
    : tab === 'diy' ? DIY_SYNC_TEXT[st.diySync] || DIY_SYNC_TEXT.idle : SYNC_TEXT[st.sync] || SYNC_TEXT.idle;
-  const fromText = st.from === 'briefing' ? t('确认本局信息阶段结束前可调整本局配置') : t('开始模拟前可调整干员携带的技能与模组，干员等级不可调整');
+  const fromText = st.from === 'briefing' ? t('确认本局信息阶段结束前可调整本局配置') : t('开始模拟前可调整干员携带的技能与模组，以及潜能与练度；干员的局内等级不可调整');
  // 干员持有 is out of match: a running match keeps the list its seat had at its start
  const ownLocked = inMatch && !!phase && phase !== PHASE.LOBBY;
  const ownText = ownLocked ? t('干员持有是局外设置：本局按开局时的设置进行，修改将在下一局生效')
@@ -640,20 +728,25 @@ function LoadoutScreen({ st }) {
      : html`<p class=${cx('lo-note', locked && 'is-locked')}><${Icon} name="info" />${locked ? t('本局的调配已锁定（确认本局信息后无法修改），修改将在下一局生效') : fromText}</p>`}
    ${!ready ? html`<div class="lo-loading"><${Spinner} size="sm" />${t('正在载入干员数据（打开页面后仅载入一次）…')}</div>`
      : lost.length ? html`<${DataMissing} files=${lost} />` : tab === 'diy'
-      ? html`<${DiyPanel} m=${m} picks=${st.diy || {}} legal=${diyLegal} kitted=${st.diyKitted} onSet=${setDiySlot} />`
+      ? html`<${DiyPanel} m=${m} picks=${st.diy || {}} legal=${diyLegal} kitted=${st.diyKitted} onSet=${setDiySlot} ops=${st.ops} onOps=${setOpsOf} />`
      : tab === 'ownership'
      ? html`<${OwnershipPanel} m=${m} roster=${ownRoster} notOwned=${st.notOwned} onToggle=${toggleOwned} />`
      : html`<main class=${cx('lo-body', narrowDetail && 'is-detail')}>
      <section class="lo-roster">
        <${Filters} m=${m} filters=${st.filters} bonds=${bonds} onFilters=${(filters) => loadoutStore.set({ filters })} />
-        <div class="lo-grid" role="listbox" aria-label=${t('干员列表')} ref=${gridRef}>
-          ${list.length ? list.map((c) => html`<${RosterCard} key=${c.chessId} m=${m} chess=${c} golden=${c.goldenId ? getChess(c.goldenId) : null}
-            entries=${st.entries} selected=${c.chessId === selId} onPick=${pick} notOwned=${(st.notOwned || []).includes(c.chessId)} />`) : html`<p class="lo-empty t-dim">${t('没有符合条件的干员')}</p>`}
+        <div class="lo-list" ref=${gridRef}>
+          <${RosterHead} />
+          <div class="lo-list__rows" role="list" aria-label=${t('干员列表')}>
+            ${list.length ? list.map((c) => html`<${RosterRow} key=${c.chessId} m=${m} chess=${c} golden=${c.goldenId ? getChess(c.goldenId) : null}
+              entries=${st.entries} ops=${st.ops} selected=${c.chessId === selId} onPick=${pick} onChange=${quickChange} onOps=${setOpsOf}
+              level=${previewLevel} notOwned=${(st.notOwned || []).includes(c.chessId)} />`) : html`<p class="lo-empty t-dim">${t('没有符合条件的干员')}</p>`}
+          </div>
        </div>
      </section>
      <div class="lo-detail-wrap">
        <button type="button" class="lo-detail-back tapx" onClick=${() => setNarrowDetail(false)}><${Icon} name="chevronLeft" />${t('干员列表')}</button>
-        <${Detail} m=${m} chess=${base} golden=${golden} entries=${st.entries} onChange=${change} onReset=${resetOne} locked=${locked}
+        <${Detail} m=${m} chess=${base} golden=${golden} entries=${st.entries} ops=${st.ops} onChange=${change} onOps=${setOpsOf} onReset=${resetOne} locked=${locked}
+          level=${golden ? previewLevel : 'normal'} onLevel=${setPreviewLevel}
          notOwned=${!!base && (st.notOwned || []).includes(base.chessId)} />
      </div>
    </main>`}
@@ -720,11 +813,13 @@ export function LoadoutHost() {
 /**
 * The entry button's badge: the same number as the screen's 已调整 N (a stored entry of a chess the data no longer offers
 * never applies) once chess.json is loaded; before that the stored entries (the badge alone must not trigger the 1.6 MB
- * download). Review fix: it counted stale entries the screen does not.
+ * download). Review fix: it counted stale entries the screen does not. With `ops` (0.2.2) the operators whose 潜能 / 练度
+ * differ count too (before chess.json: the stored entries plus the stored settings, an operator possibly twice).
 * @param {Record<string, any>} entries @param {((id: string) => any) | null} getChess null while chess.json is not loaded
+ * @param {Record<string, any>|null} [ops] @param {any[]|null} [roster] rosterOf(…) of the loaded data
 */
-export function badgeCount(entries, getChess) {
-  return getChess ? changedCount(entries, getChess) : Object.keys(entries || {}).length;
+export function badgeCount(entries, getChess, ops = null, roster = null) {
+  return getChess ? changedCount(entries, getChess, ops, roster) : Object.keys(entries || {}).length + Object.keys(ops || {}).length;
 }

 /**
@@ -734,9 +829,11 @@ export function badgeCount(entries, getChess) {
 export function LoadoutButton({ from, size = 'md', variant = 'secondary', class: cls, label = t('干员调配') }) {
  useData('local'); // the official preset icon (re-render once the local-art manifest arrives)
  const entries = useStore((s) => s.entries, Object.is, loadoutStore);
+  const ops = useStore((s) => s.ops, Object.is, loadoutStore);
  const notOwned = useStore((s) => s.notOwned, Object.is, loadoutStore);
  const diy = useStore((s) => s.diy, Object.is, loadoutStore);
-  const n = badgeCount(entries, data.status('chess') === 'ready' ? (id) => data.lookup('chess', id) : null);
+  const chessReady = data.status('chess') === 'ready';
+  const n = badgeCount(entries, chessReady ? (id) => data.lookup('chess', id) : null, ops, chessReady ? rosterOf(data.list('chess')) : null);
  // 0.2.0 补位: how many operators the player marked as not owned (the 干员持有 tab) — easy to forget between sessions
  const off = Array.isArray(notOwned) ? notOwned.length : 0;
  // 0.2.0 自选编队: how many DIY slots the player filled
@@ -52,7 +52,7 @@ describe('user playtest #2 item 1 — loadout chosen in the UI fights in the loc
      await c.click('.lo-search input');
      await c.page.keyboard.type('野鬃');
      await c.page.waitForFunction(() => document.querySelectorAll('.lo-card').length === 1, { timeout: 5000 });
-      await c.click('.lo-card');
+      await c.click('.lo-card__pick');
      await c.click('.lo-detail .lo-skill[data-skill="0"]');
      await c.click('.lo-detail .lo-mod[data-module="none"]');
      await c.page.waitForFunction(() => document.querySelector('.lo-skill.is-on[data-skill="0"]') && document.querySelector('.lo-mod.is-on[data-module="none"]'), { timeout: 3000 });
@@ -0,0 +1,150 @@
+// test/ui/loadout-rows.test.js — the 干员调配 roster as one list (0.2.2): the quick choices of PR #301 (by @farridge) laid
+// out as one row per operator with aligned columns instead of three columns of cards (the owner's decision of 2026-10-08:
+// 「三个竖排有点乱影响观感」), and the per-operator 潜能 / 练度 controls (「调配干员里自己设置吧，默认满潜满加成」): the row's skill
+// / module buttons and selects (state, labels, what a tap sets), the detail's section, a 自选 slot's selects, the 局内数值 at
+// the settings, and the css that keeps the columns aligned and the detail sliding over the list below 1000 px. Hook-free
+// views drawn as vnode trees. (The browser side: test/ui/loadout.e2e.test.js.)
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..');
+globalThis.fetch = async (url) => {
+  const name = String(url).split('/').pop();
+  try { const body = readFileSync(path.join(ROOT, 'data', name), 'utf8'); return { ok: true, status: 200, json: async () => JSON.parse(body) }; } catch { return { ok: false, status: 404, json: async () => ({}) }; }
+};
+const { RosterRow, RosterHead, statsPreview, LoadoutStats } = await import('../../public/js/screens/loadout.js');
+const { CultivationSelects, CultivationSection, cultivateName } = await import('../../public/js/screens/cultivation.js');
+const { DiyPanelView } = await import('../../public/js/screens/diy.js');
+const { data } = await import('../../public/js/data.js');
+await data.loadAll('chess', 'garrisons', 'assets', 'bonds', 'effects', 'backups');
+
+const get = (id) => data.lookup('chess', id);
+const INSIDE = 'chess_char_1_01_a';   // 隐现: S1 / S2 (default S2), MAR-X
+const VENDLA = 'chess_char_1_06_a';   // 刺玫
+const CHAR = (id) => get(id).charId;
+
+function* walk(v) {
+  if (Array.isArray(v)) { for (const x of v) yield* walk(x); return; }
+  if (!v || typeof v !== 'object') return;
+  yield v;
+  if (typeof v.type === 'function' && ['QuickSkill', 'QuickModule', 'CultivationSelects', 'SlotCard', 'KindTag', 'Bonds'].includes(v.type.name)) { yield* walk(v.type(v.props)); return; }
+  yield* walk(v.props?.children);
+}
+const hasClass = (v, c) => typeof v?.props?.class === 'string' && v.props.class.split(/\s+/).includes(c);
+const find = (tree, pred) => [...walk(tree)].filter(pred);
+const textOf = (v) => (v == null || typeof v === 'boolean' ? '' : typeof v !== 'object' ? String(v) : Array.isArray(v) ? v.map(textOf).join('') : textOf(v.props?.children));
+
+const row = (props) => RosterRow({ m: null, chess: get(INSIDE), golden: get(get(INSIDE).goldenId), entries: {}, ops: {}, selected: false, onPick: () => {}, onChange: () => {}, onOps: () => {}, ...props });
+
+test('a row: portrait / name pick, three skill slots (an empty one for a two-skill chess), 不装备 first, the equipped ones pressed', () => {
+  const picks = [];
+  const changes = [];
+  const r = row({ onPick: (id) => picks.push(id), onChange: (id, p) => changes.push([id, p]) });
+  assert.ok(hasClass(r, 'lo-card') && hasClass(r, 'lo-card--t1'));
+  assert.equal(r.props['data-chess'], INSIDE);
+  const pick = find(r, (v) => hasClass(v, 'lo-card__pick'))[0];
+  pick.props.onClick();
+  assert.deepEqual(picks, [INSIDE]);
+  const skills = find(r, (v) => hasClass(v, 'lo-q--skill'));
+  assert.deepEqual(skills.map((b) => [b.props['data-skill'], b.props['aria-pressed']]), [[0, 'false'], [1, 'true']], 'S2 is the default');
+  assert.equal(find(r, (v) => hasClass(v, 'lo-q--empty')).length, 1, 'the third slot stays empty');
+  assert.match(skills[0].props['aria-label'], /^S1 · “不惹麻烦” · /);
+  const mods = find(r, (v) => hasClass(v, 'lo-q--mod'));
+  assert.deepEqual(mods.map((b) => [b.props['data-module'], b.props['aria-pressed']]), [['none', 'false'], ['uniequip_002_inside', 'true']]);
+  skills[0].props.onClick();
+  mods[0].props.onClick();
+  assert.deepEqual(changes, [[INSIDE, { skill: 0 }], [INSIDE, { module: 'none' }]]);
+  assert.equal(find(r, (v) => hasClass(v, 'lo-card__flag')).length, 0, 'nothing changed: no flag');
+  // the shared preview: 精锐 shows the Lv.7 SP numbers of the same skill
+  const elite = get(get(INSIDE).goldenId).skills.find((s) => s.index === 0);
+  const e = find(row({ level: 'elite' }), (v) => hasClass(v, 'lo-q--skill'))[0];
+  assert.match(e.props['aria-label'], new RegExp(`消耗 ${elite.spCost}`));
+  assert.equal(row({ level: 'elite' }).props['data-variant'], 'elite');
+});
+
+test('a row\'s 潜能 / 练度 selects: the defaults quiet, a changed one marked; a change sets the operator\'s settings', () => {
+  const sets = [];
+  const r = row({ onOps: (id, p) => sets.push([id, p]) });
+  const sel = find(r, (v) => v.type === 'select');
+  assert.deepEqual(sel.map((s) => [s.props['data-cult'], s.props.value]), [['potential', '6'], ['cultivate', '3']]);
+  assert.equal(find(r, (v) => hasClass(v, 'is-off')).length, 0, 'the defaults are not marked');
+  sel[0].props.onChange({ currentTarget: { value: '2' } });
+  sel[1].props.onChange({ currentTarget: { value: '0' } });
+  assert.deepEqual(sets, [[CHAR(INSIDE), { potential: 2 }], [CHAR(INSIDE), { cultivate: 0 }]]);
+  const options = find(sel[0], (v) => v.type === 'option').map((o) => textOf(o));
+  assert.deepEqual(options, ['潜能 1', '潜能 2', '潜能 3', '潜能 4', '潜能 5', '潜能 6']);
+  assert.deepEqual(find(sel[1], (v) => v.type === 'option').map((o) => textOf(o)), ['未精英化', '精英1', '精英2', '精英2 Lv.60']);
+  // changed: the select is marked, the row flagged and counted as changed
+  const c = row({ ops: { [CHAR(INSIDE)]: { potential: 2 } } });
+  assert.ok(hasClass(c, 'is-changed'));
+  assert.equal(find(c, (v) => hasClass(v, 'lo-card__flag')).length, 1);
+  assert.deepEqual(find(c, (v) => hasClass(v, 'is-off')).map((v) => v.props.class.includes('lo-cult__pot')), [true]);
+  // a chess marked not owned: the 替补 tag, the settings say they do not apply now
+  const s = row({ notOwned: true });
+  assert.ok(hasClass(s, 'is-standin'));
+  assert.equal(textOf(find(s, (v) => hasClass(v, 'lo-card__sub'))[0]), '替补');
+  assert.match(find(s, (v) => hasClass(v, 'lo-cult'))[0].props.title, /替补干员没有潜能与练度/);
+});
+
+test('the head names the four columns; CultivationSelects without an operator draws nothing', () => {
+  assert.deepEqual(find(RosterHead(), (v) => hasClass(v, 'lo-list__h')).map((v) => textOf(v)), ['干员', '技能', '模组精锐', '潜能 · 练度']);
+  assert.equal(CultivationSelects({ charId: null, ops: {}, onSet: () => {} }), null);
+});
+
+test('the detail\'s section: 潜能 1–6 and the four official 练度 tiers, the tier\'s effect, the stand-in note', () => {
+  const sets = [];
+  const id = CHAR(VENDLA);
+  const sec = CultivationSection({ charId: id, ops: { [id]: { potential: 3 } }, onSet: (c, p) => sets.push([c, p]) });
+  const pots = find(sec, (v) => v.props && v.props['data-potential'] != null);
+  assert.deepEqual(pots.map((b) => [b.props['data-potential'], b.props['aria-checked']]), [[1, 'false'], [2, 'false'], [3, 'true'], [4, 'false'], [5, 'false'], [6, 'false']]);
+  const tiers = find(sec, (v) => v.type === 'button' && v.props['data-cultivate'] != null);
+  assert.deepEqual(tiers.map((b) => textOf(b)), ['未精英化', '精英阶段1', '精英阶段2', '精英阶段2-60级'], 'effects.json names');
+  assert.equal(tiers[3].props['aria-checked'], 'true', 'the default tier');
+  assert.match(textOf(find(sec, (v) => hasClass(v, 'lo-cult__eff'))[0]), /精英阶段2-60级 攻击力、防御力和最大生命值\+10%/);
+  pots[0].props.onClick();
+  tiers[1].props.onClick();
+  assert.deepEqual(sets, [[id, { potential: 1 }], [id, { cultivate: 1 }]]);
+  assert.equal(cultivateName(0), '未精英化');
+  const st = CultivationSection({ charId: id, ops: {}, onSet: () => {}, standIn: true });
+  assert.ok(hasClass(st, 'is-moot'));
+  assert.match(textOf(find(st, (v) => hasClass(v, 'lo-cult__note'))[0]), /替补干员没有潜能与练度/);
+});
+
+test('自选编队: an owned pick\'s card carries its operator\'s selects, a prototype says it has neither', () => {
+  const sets = [];
+  const picks = { chess_char_6_diy1_a: { charId: 'char_003_kalts', skillIndex: 0 }, chess_char_5_diy1_a: { charId: 'char_609_acguad' } };
+  const tree = DiyPanelView({ m: null, picks, legal: picks, kitted: null, onSet: () => {}, picking: null, onPicking: () => {}, ops: { char_003_kalts: { cultivate: 1 } }, onOps: (c, p) => sets.push([c, p]) });
+  const cult = find(tree, (v) => hasClass(v, 'diy-slot__cult'));
+  assert.equal(cult.length, 2);
+  const sel = find(tree, (v) => v.type === 'select');
+  assert.deepEqual(sel.map((s) => s.props.value), ['6', '1'], '凯尔希: 潜能 6, 精英1');
+  sel[0].props.onChange({ currentTarget: { value: '4' } });
+  assert.deepEqual(sets, [['char_003_kalts', { potential: 4 }]]);
+  assert.ok(cult.some((v) => textOf(v) === '原型干员没有潜能与练度'));
+});
+
+test('局内数值 at the operator\'s settings: 刺玫 at 潜能1 / 未精英化 and at the defaults (×1.1)', () => {
+  const v = get(VENDLA);
+  const g = get(v.goldenId);
+  const pv = (ops, level = 'normal') => statsPreview(v, g, {}, level, get, ops).record.stats;
+  assert.deepEqual([pv({ [v.charId]: { potential: 1, cultivate: 0 } }).atk, pv({ [v.charId]: { potential: 1, cultivate: 0 } }).cost], [413, 17]);
+  assert.equal(pv({}).atk, 435 * 1.1, 'none set: 满潜 + 精英2 Lv.60');
+  assert.equal(pv({ [v.charId]: { potential: 1, cultivate: 0 } }, 'elite').atk, 508 + 23, 'the elite: statsBase at 潜能1 + INC-X');
+  assert.ok(statsPreview(v, g, {}, 'normal', get, {}).lo.cultivation);
+  // the caption says the numbers carry 潜能 and 练度 (an owned operator; effects.json loaded)
+  const cap = (tree) => textOf(find(tree, (n) => hasClass(n, 'lo-stats__cap'))[0]);
+  assert.match(cap(LoadoutStats({ base: v, golden: g, entries: {}, level: 'elite', onLevel() {}, getChess: get, ops: {} })), /^数值含所选模组；含潜能与练度；不含技能发动/);
+});
+
+test('css: the head and the rows share one grid (columns aligned), quick targets grow on a coarse pointer, the detail slides over below 1000 px', () => {
+  const css = readFileSync(path.join(ROOT, 'public/css/screens/loadout.css'), 'utf8');
+  assert.match(css, /\.lo-list__head, \.lo \.lo-card \{ display: grid; grid-template-columns: var\(--cols\);/);
+  assert.match(css, /\.sp-coarse \.lo-list \{ --q: max\(\.44rem, 40px\); \}/);
+  const block = css.slice(css.indexOf('@media (max-width: 1000px) {\n  .lo-body'));
+  assert.match(block, /\.lo-body \{ grid-template-columns: minmax\(0, 1fr\); \}/);
+  assert.match(block, /\.lo-detail-wrap \{ display: none; \}/);
+  assert.ok(!/\.lo-grid\b/.test(css), 'the old card grid is gone');
+});
@@ -101,7 +101,7 @@ describe('干员调配 overlay (real server, headless Chrome)', { skip: !ENABLED
    // search → one card
    await page.type('.lo-search input', '隐现');
    await page.waitForFunction(() => document.querySelectorAll('.lo-card').length === 1, { timeout: 5000 });
-    await page.click('.lo-card');
+    await page.click('.lo-card__pick');
    await page.waitForSelector('.lo-detail .lo-skill[data-skill="0"]', { visible: true });
    await page.click('.lo-detail .lo-skill[data-skill="0"]');
    await page.click('.lo-detail .lo-mod[data-module="none"]');
@@ -141,7 +141,7 @@ describe('干员调配 overlay (real server, headless Chrome)', { skip: !ENABLED
    // one edit, so there is something to export
    await page.type('.lo-search input', '隐现');
    await page.waitForFunction(() => document.querySelectorAll('.lo-card').length === 1, { timeout: 5000 });
-    await page.click('.lo-card');
+    await page.click('.lo-card__pick');
    await page.waitForSelector('.lo-detail .lo-skill[data-skill="0"]', { visible: true });
    await page.click('.lo-detail .lo-skill[data-skill="0"]');
    const stored = await page.evaluate(() => JSON.parse(localStorage.getItem('sp.pref.loadout')));
@@ -210,7 +210,7 @@ describe('干员调配 overlay (real server, headless Chrome)', { skip: !ENABLED
    await page.waitForSelector('.lo .lo-card', { visible: true, timeout: 15000 });
    await page.type('.lo-search input', '隐现');
    await page.waitForFunction(() => document.querySelectorAll('.lo-card').length === 1, { timeout: 5000 });
-    await page.click('.lo-card');
+    await page.click('.lo-card__pick');
    await page.waitForSelector('.lo-detail .lo-skill[data-skill="0"]', { visible: true });
    // choose S1, close and confirm at once — well inside the sync's debounce
    await page.click('.lo-detail .lo-skill[data-skill="0"]');
@@ -273,7 +273,7 @@ describe('干员调配 overlay (real server, headless Chrome)', { skip: !ENABLED
    await page.setViewport({ width: 1920, height: 1080 });
    await page.type('.lo-search input', '隐现');
    await page.waitForFunction(() => document.querySelectorAll('.lo-card').length === 1, { timeout: 5000 });
-    await page.click('.lo-card');
+    await page.click('.lo-card__pick');
    await page.waitForSelector('.lo-detail .lo-skill[data-skill="0"]', { visible: true });
    // edit, and the briefing ends before the debounced send (every human ready: the requests stand in for the timer)
    await page.click('.lo-detail .lo-skill[data-skill="0"]');
@@ -297,7 +297,7 @@ describe('干员调配 overlay (real server, headless Chrome)', { skip: !ENABLED
    await page.waitForSelector('.lo .lo-card', { visible: true, timeout: 15000 });
    await page.type('.lo-search input', '烛煌');
    await page.waitForFunction(() => document.querySelectorAll('.lo-card').length === 1, { timeout: 5000 });
-    await page.click('.lo-card');
+    await page.click('.lo-card__pick');
    await page.waitForSelector('.lo-detail .lo-mod[data-module="none"]', { visible: true });
    // wait for every module tile to settle (image loaded or lettered fallback)
    await page.waitForFunction(() => [...document.querySelectorAll('.lo-mod:not(.lo-mod--none) .lo-mglyph')]
@@ -320,36 +320,50 @@ describe('干员调配 overlay (real server, headless Chrome)', { skip: !ENABLED
    await ctx.close();
  });

-  test('phone 844×390 (touch): roster + detail side by side, tier / class filters, tap to choose', async () => {
+  test('phone 844×390 (touch): one list with the quick choices (0.2.2), the detail slides over it, tier / class filters, tap to choose', async () => {
    const { ctx, page, problems } = await open({ w: 844, h: 390, touch: true });
    await page.tap('.lobby-screen [data-testid="loadout-open"]');
    await page.waitForSelector('.lo .lo-card', { visible: true, timeout: 15000 });
    await assertBgLayer(page);
    await page.screenshot({ path: path.join(OUT, 'loadout-phone.png') });
    // review fix: the shared Button / TextField shrink to 6–7 px text on phones — the overlay's own controls stay readable
-    // and tappable (返回, 全部恢复默认, the detail's 恢复默认, the search input)
-    const ctl = await page.evaluate(() => Object.fromEntries(['.lo-back', '.lo-top__right .btn', '.lo-dhead__reset', '.lo-search .field__input'].map((sel) => {
+    // and tappable (返回, 全部恢复默认, the search input; the detail's 恢复默认 below)
+    const measure = (sels) => page.evaluate((list) => Object.fromEntries(list.map((sel) => {
      const el = document.querySelector(sel);
      const b = el.getBoundingClientRect();
      return [sel, { h: Math.round(b.height), fs: parseFloat(getComputedStyle(el).fontSize) }];
-    })));
-    for (const [sel, v] of Object.entries(ctl)) {
-      assert.ok(v.fs >= 11, `${sel} text ≥ 11 px (${JSON.stringify(v)})`);
-      if (sel !== '.lo-search .field__input') assert.ok(v.h >= 28, `${sel} ≥ 28 px tall (${JSON.stringify(v)})`);
-    }
+    })), sels);
+    const check = (ctl) => {
+      for (const [sel, v] of Object.entries(ctl)) {
+        assert.ok(v.fs >= 11, `${sel} text ≥ 11 px (${JSON.stringify(v)})`);
+        if (sel !== '.lo-search .field__input') assert.ok(v.h >= 28, `${sel} ≥ 28 px tall (${JSON.stringify(v)})`);
+      }
+    };
+    check(await measure(['.lo-back', '.lo-top__right .btn', '.lo-search .field__input']));
+    // the list takes the whole width (no detail beside it below 1000 px); the quick choices are 40 px touch targets
+    assert.equal(await page.$eval('.lo-detail-wrap', (el) => getComputedStyle(el).display), 'none');
+    const q = await page.$eval('.lo-card .lo-q--skill', (el) => { const b = el.getBoundingClientRect(); return [Math.round(b.width), Math.round(b.height)]; });
+    assert.ok(q[0] >= 40 && q[1] >= 40, `quick targets ${q}`);
+    assert.equal(await page.evaluate(() => document.querySelector('.lo').scrollWidth > innerWidth + 1), false, 'no horizontal overflow');
    await page.tap('.lo-chip--t6');
    await page.waitForFunction(() => [...document.querySelectorAll('.lo-card')].every((c) => c.classList.contains('lo-card--t6')));
    await page.tap('.lo-chip--prof[title="狙击"]');
    await page.waitForFunction(() => document.querySelectorAll('.lo-card').length >= 1);
-    await page.tap('.lo-card');
+    // a quick choice keeps the list
+    await page.tap('.lo-card .lo-q--skill[data-skill="0"]');
+    assert.notEqual(await page.$eval('.lo-roster', (el) => getComputedStyle(el).display), 'none', 'a quick choice keeps the list');
+    await page.tap('.lo-card__pick');
    await page.waitForSelector('.lo-detail .lo-skill', { visible: true });
-    assert.notEqual(await page.$eval('.lo-roster', (el) => getComputedStyle(el).display), 'none', 'side by side');
+    assert.equal(await page.$eval('.lo-roster', (el) => getComputedStyle(el).display), 'none', 'the detail covers the list');
+    check(await measure(['.lo-dhead__reset']));
    // every skill option is reachable inside the viewport (the detail body scrolls)
    const r = await page.$eval('.lo-detail .lo-skill:last-child', (el) => { el.scrollIntoView({ block: 'nearest' }); const b = el.getBoundingClientRect(); return { top: b.top, bottom: b.bottom }; });
    assert.ok(r.top >= 0 && r.bottom <= 390, JSON.stringify(r));
    await page.tap('.lo-detail .lo-skill:last-child');
    await page.waitForFunction(() => document.querySelector('.lo-detail .lo-skill:last-child').classList.contains('is-on'));
    await page.screenshot({ path: path.join(OUT, 'loadout-phone-detail.png') });
+    await page.tap('.lo-detail-back');
+    await page.waitForSelector('.lo-roster', { visible: true });
    assert.deepEqual(problems, []);
    await ctx.close();
  });
@@ -359,7 +373,7 @@ describe('干员调配 overlay (real server, headless Chrome)', { skip: !ENABLED
    await page.tap('.lobby-screen [data-testid="loadout-open"]');
    await page.waitForSelector('.lo .lo-card', { visible: true, timeout: 15000 });
    assert.equal(await page.$eval('.lo-detail-wrap', (el) => getComputedStyle(el).display), 'none');
-    await page.tap('.lo-card');
+    await page.tap('.lo-card__pick');
    await page.waitForSelector('.lo-detail .lo-skill', { visible: true });
    assert.equal(await page.$eval('.lo-roster', (el) => getComputedStyle(el).display), 'none', 'detail covers the roster');
    await page.screenshot({ path: path.join(OUT, 'loadout-small-phone.png') });
@@ -372,6 +386,8 @@ describe('干员调配 overlay (real server, headless Chrome)', { skip: !ENABLED
  // ---- 局内数值 (GitHub issue #64) -------------------------------------------------------------------------------------
  const CHESS = () => JSON.parse(readFileSync(path.join(ROOT, 'data/chess.json'), 'utf8'));
  const fmt = (n) => Math.round(n).toLocaleString('en-US');
+  // 0.2.2: the numbers carry the 练度 — none set: 精英2 Lv.60, effects.json aceffect_char_4 (×1.1 ATK / DEF / max HP)
+  const T4 = JSON.parse(readFileSync(path.join(ROOT, 'data/effects.json'), 'utf8')).aceffect_char_4.buffs.find((b) => b.key === 'char_attribute_mul').bb;
  /** The section's eight stats: label → shown value. */
  const shownStats = (page) => page.$$eval('.lo-sec--stats .dstat', (els) => Object.fromEntries(els.map((e) => [e.querySelector('.dstat__k').textContent, e.querySelector('.dstat__v').textContent])));
  const rangeTiles = (page) => page.$$eval('.lo-sec--stats .rgrid i.on', (els) => els.length);
@@ -380,7 +396,7 @@ describe('干员调配 overlay (real server, headless Chrome)', { skip: !ENABLED
    await page.keyboard.press('Backspace');
    await page.type('.lo-search input', name);
    await page.waitForFunction((n) => document.querySelectorAll('.lo-card').length === 1 && document.querySelector('.lo-card .lo-card__name')?.textContent === n, { timeout: 5000 }, name);
-    await page.click('.lo-card');
+    await page.click('.lo-card__pick');
    await page.waitForSelector('.lo-sec--stats .dstat', { visible: true });
  }

@@ -394,25 +410,25 @@ describe('干员调配 overlay (real server, headless Chrome)', { skip: !ENABLED
    await page.waitForSelector('.lo .lo-card', { visible: true, timeout: 15000 });
    await pickChess(page, '隐现');
    // between the skills and the modules, 精锐 shown first: the default module's numbers, the 3 × 4 range
-    assert.deepEqual(await page.$$eval('.lo-detail__body > .lo-sec > header h3', (els) => els.map((e) => e.firstChild.textContent)), ['技能', '局内数值', '模组']);
+    assert.deepEqual(await page.$$eval('.lo-detail__body > .lo-sec > header h3', (els) => els.map((e) => e.firstChild.textContent)), ['潜能与练度', '技能', '局内数值', '模组']);
    const stats = await shownStats(page);
    assert.deepEqual(Object.keys(stats), ['生命上限', '攻击', '防御', '法术抗性', '攻击间隔', '阻挡数', '部署费用', '再部署']);
-    assert.equal(stats['生命上限'], fmt(golden.statsBase.maxHp + mod.attr.maxHp));
-    assert.equal(stats['攻击'], fmt(golden.statsBase.atk + mod.attr.atk));
+    assert.equal(stats['生命上限'], fmt((golden.statsBase.maxHp + mod.attr.maxHp) * T4.max_hp));
+    assert.equal(stats['攻击'], fmt((golden.statsBase.atk + mod.attr.atk) * T4.atk));
    assert.equal(await rangeTiles(page), base.rangeGrid.length);
    assert.equal(await page.$eval('.lo-sec--stats', (el) => el.dataset.variant), 'elite');
    await page.screenshot({ path: path.join(OUT, 'loadout-stats-desktop.png') });
    // 不装备 → the base numbers; the skill choice changes nothing; 普通 → the normal chess; both toggles are independent
    await page.click('.lo-detail .lo-mod[data-module="none"]');
-    await page.waitForFunction((v) => document.querySelector('.lo-sec--stats .dstat__v')?.textContent === v, {}, fmt(golden.statsBase.maxHp));
-    assert.equal((await shownStats(page))['攻击'], fmt(golden.statsBase.atk));
+    await page.waitForFunction((v) => document.querySelector('.lo-sec--stats .dstat__v')?.textContent === v, {}, fmt(golden.statsBase.maxHp * T4.max_hp));
+    assert.equal((await shownStats(page))['攻击'], fmt(golden.statsBase.atk * T4.atk));
    await page.click('.lo-detail .lo-skill[data-skill="0"]');
-    assert.equal((await shownStats(page))['攻击'], fmt(golden.statsBase.atk), 'a skill is not a stat');
+    assert.equal((await shownStats(page))['攻击'], fmt(golden.statsBase.atk * T4.atk), 'a skill is not a stat');
    await page.click('.lo-sec--stats .lo-seg button[data-variant="normal"]');
-    await page.waitForFunction((v) => document.querySelector('.lo-sec--stats .dstat__v')?.textContent === v, {}, fmt(base.stats.maxHp));
+    await page.waitForFunction((v) => document.querySelector('.lo-sec--stats .dstat__v')?.textContent === v, {}, fmt(base.stats.maxHp * T4.max_hp));
    assert.equal(await page.$eval('.lo-sec--stats', (el) => el.dataset.variant), 'normal');
    assert.equal(await page.$eval('.lo-skill.is-on', (el) => el.dataset.skill), '0');
-    assert.equal(await page.$eval('.lo-seg button.is-on', (el) => el.textContent.startsWith('普通')), true, 'the skill level toggle is its own');
+    assert.equal(await page.$eval('.lo-sec:not(.lo-sec--cult) .lo-seg button.is-on', (el) => el.textContent.startsWith('普通')), true, 'the skill level toggle is its own');
    // the layout: no sideways overflow, the range box beside the numbers
    const box = await page.evaluate(() => {
      const body = document.querySelector('.lo-detail__body');
@@ -443,7 +459,7 @@ describe('干员调配 overlay (real server, headless Chrome)', { skip: !ENABLED
    await page.waitForSelector('.lo .lo-card', { visible: true, timeout: 15000 });
    await page.type('.lo-search input', '隐现');
    await page.waitForFunction(() => document.querySelectorAll('.lo-card').length === 1, { timeout: 5000 });
-    await page.tap('.lo-card');
+    await page.tap('.lo-card__pick');
    await page.waitForSelector('.lo-sec--stats .dstat', { visible: true });
    await page.$eval('.lo-sec--stats', (el) => el.scrollIntoView({ block: 'start' }));
    const m = await page.evaluate(() => {
@@ -471,8 +487,36 @@ describe('干员调配 overlay (real server, headless Chrome)', { skip: !ENABLED
    await page.screenshot({ path: path.join(OUT, 'loadout-stats-phone.png') });
    // a choice made further down updates it (touch: the module card, 不装备)
    await page.tap('.lo-detail .lo-mod[data-module="none"]');
-    await page.waitForFunction((v) => document.querySelector('.lo-sec--stats .dstat__v')?.textContent === v, {}, fmt(golden.statsBase.maxHp));
-    assert.equal((await shownStats(page))['攻击'], fmt(golden.statsBase.atk));
+    await page.waitForFunction((v) => document.querySelector('.lo-sec--stats .dstat__v')?.textContent === v, {}, fmt(golden.statsBase.maxHp * T4.max_hp));
+    assert.equal((await shownStats(page))['攻击'], fmt(golden.statsBase.atk * T4.atk));
+    assert.deepEqual(problems, []);
+    await ctx.close();
+  });
+
+  test('潜能 / 练度 (0.2.2): a row\'s selects and the detail\'s buttons set the operator\'s settings — stored, synced, the numbers follow', async () => {
+    const chess = CHESS();
+    const v = chess.chess_char_1_06_a; // 刺玫: 潜能1 ATK 413 / cost 17; elite statsBase 508 at 潜能1
+    const { ctx, page, problems } = await open();
+    await clickSel(page, '.lobby-screen [data-testid="loadout-open"]');
+    await page.waitForSelector('.lo .lo-card', { visible: true, timeout: 15000 });
+    await pickChess(page, '刺玫');
+    // a row's select: 潜能 1
+    await page.select('.lo-card[data-chess="chess_char_1_06_a"] select[data-cult="potential"]', '1');
+    await page.waitForFunction((id) => JSON.parse(localStorage.getItem('sp.pref.loadout') || '{}').ops?.[id]?.potential === 1, {}, v.charId);
+    await page.click('.lo-sec--stats .lo-seg button[data-variant="normal"]');
+    await page.waitForFunction((x) => [...document.querySelectorAll('.lo-sec--stats .dstat')].some((e) => e.querySelector('.dstat__k').textContent === '部署费用' && e.querySelector('.dstat__v').textContent === x), {}, '17');
+    assert.equal((await shownStats(page))['攻击'], fmt(413 * T4.atk), '潜能1 at 精英2 Lv.60');
+    // the detail's 练度 buttons: 未精英化 → ×1
+    await page.click('.lo-sec--cult [data-cultivate="0"]');
+    await page.waitForFunction(() => document.querySelector('.lo-sec--cult [data-cultivate="0"]').getAttribute('aria-checked') === 'true');
+    assert.equal((await shownStats(page))['攻击'], fmt(413));
+    assert.equal(await page.$eval('.lo-card[data-chess="chess_char_1_06_a"] select[data-cult="cultivate"]', (el) => el.value), '0', 'the row follows');
+    assert.ok(await page.$eval('.lo-card[data-chess="chess_char_1_06_a"]', (el) => el.classList.contains('is-changed')), 'a changed operator');
+    await page.waitForFunction(() => /已同步/.test(document.querySelector('.lo-sync')?.textContent || ''), { timeout: 8000 });
+    // 恢复默认 resets them with the skill / module
+    await page.click('.lo-dhead__reset');
+    await page.waitForFunction((id) => !JSON.parse(localStorage.getItem('sp.pref.loadout') || '{}').ops?.[id], {}, v.charId);
+    assert.equal((await shownStats(page))['攻击'], fmt(v.stats.atk * T4.atk));
    assert.deepEqual(problems, []);
    await ctx.close();
  });
@@ -58,7 +58,7 @@ describe('DESIGN §16 — a teammate\'s unit shows its owner\'s loadout (real se
      await guest.click('.lo-search input');
      await guest.page.keyboard.type('野鬃');
      await guest.page.waitForFunction(() => document.querySelectorAll('.lo-card').length === 1, { timeout: 5000 });
-      await guest.click('.lo-card');
+      await guest.click('.lo-card__pick');
      await guest.click('.lo-detail .lo-skill[data-skill="0"]');
      await guest.click('.lo-detail .lo-mod[data-module="none"]');
      await guest.page.waitForFunction(() => /已同步/.test(document.querySelector('.lo-sync')?.textContent || ''), { timeout: 8000 });