@@ -7713,6 +7777,10 @@ function openHockeyPrematchButtonsEditor() {
${renderGroup(null, -1)}
${draftGroups.map((group, index) => renderGroup(group, index)).join("")}
@@ -7735,6 +7803,12 @@ function openHockeyPrematchButtonsEditor() {
draftSelectors.push({ id: `selector_${draftSelectors.length + 1}`, label: `Период ${draftSelectors.length + 1}`, description: "", group_id: targetGroup, button_id: targetButton, style: "segments", options: [{value:"all",label:"МАТЧ"},{value:"1",label:"1"},{value:"2",label:"2"},{value:"3",label:"3"}], default_value: "all", sort_order: draftSelectors.length * 10, enabled: true });
renderEditor();
});
+ document.querySelector("[data-player-panel-add]")?.addEventListener("click", () => {
+ if (draftPlayerPanels.length >= 16) return toast("Можно создать до 16 блоков игроков", true);
+ draftPlayerPanels.push({ id: `players_${draftPlayerPanels.length + 1}`, label: `Игроки ${draftPlayerPanels.length + 1}`, description: "", slots: 2, rule: "any", sync_selected_player: false, collapsed_default: true, sort_order: draftPlayerPanels.length * 10, enabled: true });
+ renderEditor();
+ });
+
document.querySelector("[data-prematch-add]")?.addEventListener("click", () => {
if (draft.length >= 64) return toast("Можно создать до 64 кнопок", true);
const targetGroup = draftGroups.some((group) => group.id === activeEditorGroupId) ? activeEditorGroupId : "";
@@ -7807,6 +7881,46 @@ function openHockeyPrematchButtonsEditor() {
renderEditor();
}));
+ document.querySelectorAll("[data-player-panel-field]").forEach((control) => {
+ const field = control.dataset.playerPanelField;
+ // Changing the system ID also changes every data-player-panel-id attribute
+ // in this editor row. Commit it on blur/change and rebuild the row at once,
+ // otherwise the remaining controls would still point at the old ID.
+ const eventName = field === "id" || control.type === "checkbox" || control.tagName === "SELECT" || control.type === "number" ? "change" : "input";
+ control.addEventListener(eventName, () => {
+ const panel = draftPlayerPanels.find((item) => item.id === control.dataset.playerPanelId);
+ if (!panel) return;
+ const previousId = panel.id;
+ panel[field] = control.type === "checkbox" ? control.checked : (control.type === "number" ? clamp(Number(control.value) || 1, 1, 6) : control.value);
+ if (field === "id") {
+ const normalized = normalizePlayerSelectionPanels(draftPlayerPanels);
+ draftPlayerPanels = normalized;
+ const updated = draftPlayerPanels.find((item) => item.id === String(panel.id || "").trim().replace(/[^A-Za-z0-9_]+/g, "_").replace(/^_+|_+$/g, ""))
+ || draftPlayerPanels.find((item) => item.sort_order === panel.sort_order && item.label === panel.label);
+ if (updated && previousId !== updated.id) toast(`ID блока: ${updated.id}`);
+ renderEditor();
+ }
+ });
+ });
+ document.querySelectorAll("[data-player-panel-up]").forEach((button) => button.addEventListener("click", () => {
+ const index = draftPlayerPanels.findIndex((item) => item.id === button.dataset.playerPanelUp);
+ if (index > 0) [draftPlayerPanels[index - 1], draftPlayerPanels[index]] = [draftPlayerPanels[index], draftPlayerPanels[index - 1]];
+ draftPlayerPanels.forEach((item, i) => { item.sort_order = i * 10; });
+ renderEditor();
+ }));
+ document.querySelectorAll("[data-player-panel-down]").forEach((button) => button.addEventListener("click", () => {
+ const index = draftPlayerPanels.findIndex((item) => item.id === button.dataset.playerPanelDown);
+ if (index >= 0 && index < draftPlayerPanels.length - 1) [draftPlayerPanels[index + 1], draftPlayerPanels[index]] = [draftPlayerPanels[index], draftPlayerPanels[index + 1]];
+ draftPlayerPanels.forEach((item, i) => { item.sort_order = i * 10; });
+ renderEditor();
+ }));
+ document.querySelectorAll("[data-player-panel-delete]").forEach((button) => button.addEventListener("click", () => {
+ const panel = draftPlayerPanels.find((item) => item.id === button.dataset.playerPanelDelete);
+ if (!panel || !window.confirm(`Удалить блок «${panel.label}»? Сохранённые значения матча останутся в базе, но блок исчезнет из интерфейса.`)) return;
+ draftPlayerPanels = draftPlayerPanels.filter((item) => item.id !== panel.id);
+ renderEditor();
+ }));
+
document.querySelectorAll("[data-quick-selector-field]").forEach((control) => {
const eventName = control.type === "checkbox" || control.tagName === "SELECT" ? "change" : "input";
control.addEventListener(eventName, () => {
@@ -7907,9 +8021,18 @@ function openHockeyPrematchButtonsEditor() {
const options = parseQuickPanelSelectorOptions(control.value);
if (options.length) selector.options = options;
});
+ document.querySelectorAll("[data-player-panel-row]").forEach((row) => {
+ const panel = draftPlayerPanels.find((item) => item.id === row.dataset.playerPanelRow);
+ if (!panel) return;
+ row.querySelectorAll("[data-player-panel-field]").forEach((control) => {
+ const field = control.dataset.playerPanelField;
+ panel[field] = control.type === "checkbox" ? control.checked : (control.type === "number" ? clamp(Number(control.value) || 1, 1, 6) : control.value);
+ });
+ });
draftGroups.forEach((item, index) => { item.sort_order = index * 10; });
+ draftPlayerPanels.forEach((item, index) => { item.sort_order = index * 10; });
for (const groupId of ["", ...draftGroups.map((group) => group.id)]) renumberGroup(groupId);
- if (await hockeyPersistPrematchButtons(draft, draftGroups, draftSelectors)) closeModal();
+ if (await hockeyPersistPrematchButtons(draft, draftGroups, draftSelectors, draftPlayerPanels)) closeModal();
});
};
renderEditor();
@@ -8238,6 +8361,275 @@ function hockeyEventCategoryLabels(language) {
: {all:"Все",goal:"Гол",penalty:"Удаление",shot:"Бросок",shootout:"Буллит",period:"Период",timeout:"Тайм-аут",goalie:"Вратарь",comment:"Комментарий",info:"Событие"};
}
+function hockeyPlayerSelectionPanels() {
+ return normalizePlayerSelectionPanels(state.config.player_selection_panels).filter((panel) => panel.enabled !== false);
+}
+
+function hockeyPlayerSelectionValueKey(panelId, slot, field) {
+ return `player_select.${panelId}.player${slot}_${field}`;
+}
+
+function hockeyPlayerSelectionTeamId(player) {
+ if (!player) return "";
+ const side = player.side === "away" ? "away" : player.side === "home" ? "home" : "";
+ const raw = player.raw || {};
+ const direct = raw.team_external_id || raw.team_id || raw.club_external_id || raw.club_id || raw.team?.external_id || raw.team?.id || "";
+ if (direct) return String(direct);
+ if (!side) return "";
+ const team = getByPath(state.data, `hockey.selected_game.${side}`) || {};
+ return String(team.external_id || team.team_external_id || team.team_id || team.club_id || team.id || "");
+}
+
+function hockeyPlayerSelectionSlot(panel, slot) {
+ const values = hockeyMatchRuntimeValues();
+ const read = (field) => String(values[hockeyPlayerSelectionValueKey(panel.id, slot, field)] ?? "");
+ return {
+ id: read("id"),
+ dbId: read("db_id"),
+ teamId: read("team_id"),
+ side: read("side"),
+ number: read("number"),
+ name: read("name"),
+ };
+}
+
+function hockeyPlayerSelectionRuleLabel(rule) {
+ return ({ any: "любые команды", home: "только левая", away: "только правая", different_teams: "разные команды" })[rule] || "любые команды";
+}
+
+function hockeyPlayerSelectionAllows(panel, slot, player) {
+ const side = String(player?.side || "");
+ if (panel.rule === "home" && side !== "home") return { ok: false, message: "В этот блок можно добавлять только игроков левой команды" };
+ if (panel.rule === "away" && side !== "away") return { ok: false, message: "В этот блок можно добавлять только игроков правой команды" };
+ if (panel.rule === "different_teams") {
+ const occupiedSides = [];
+ for (let index = 1; index <= panel.slots; index += 1) {
+ if (index === slot) continue;
+ const current = hockeyPlayerSelectionSlot(panel, index);
+ if (current.id || current.dbId) occupiedSides.push(current.side);
+ }
+ if (side && occupiedSides.includes(side)) return { ok: false, message: "В этом блоке игроки должны быть из разных команд" };
+ }
+ return { ok: true };
+}
+
+async function hockeySyncLegacySelectedPlayer(player, teamId = "") {
+ const gameId = hockeyTimerSelectedGameId();
+ if (!gameId) return false;
+ const compact = player ? hockeyCompactPlayer(player) : null;
+ try {
+ const response = await fetch("/api/hockey/context/batch", {
+ method: "POST", cache: "no-store", credentials: "same-origin",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ values: {
+ selected_player_id: compact?.externalId || "",
+ selected_player_team_id: String(teamId || ""),
+ },
+ context: {
+ game_id: gameId,
+ device_id: currentRuntimeVmixDeviceId(),
+ session_token: currentRuntimeHockeySessionToken(),
+ },
+ }),
+ });
+ return response.ok;
+ } catch (_) { return false; }
+}
+
+function hockeyPlayerSelectionPatch(panel, slot, player = null) {
+ const compact = player ? hockeyCompactPlayer(player) : null;
+ const teamId = player ? hockeyPlayerSelectionTeamId(player) : "";
+ return {
+ [`player_select.${panel.id}._label`]: panel.label,
+ [`player_select.${panel.id}._slots`]: String(panel.slots),
+ [`player_select.${panel.id}._rule`]: panel.rule,
+ [hockeyPlayerSelectionValueKey(panel.id, slot, "id")]: compact?.externalId || "",
+ [hockeyPlayerSelectionValueKey(panel.id, slot, "db_id")]: compact?.dbId || "",
+ [hockeyPlayerSelectionValueKey(panel.id, slot, "team_id")]: teamId,
+ [hockeyPlayerSelectionValueKey(panel.id, slot, "side")]: compact?.side || "",
+ [hockeyPlayerSelectionValueKey(panel.id, slot, "number")]: compact?.number || "",
+ [hockeyPlayerSelectionValueKey(panel.id, slot, "name")]: compact?.name || "",
+ };
+}
+
+async function hockeySetPlayerSelectionSlot(panel, slot, player) {
+ if (!player) return false;
+ const validation = hockeyPlayerSelectionAllows(panel, slot, player);
+ if (!validation.ok) {
+ toast(validation.message, true);
+ return false;
+ }
+ await hockeySetMatchValues(hockeyPlayerSelectionPatch(panel, slot, player), { refreshMapping: true });
+ if (panel.sync_selected_player) await hockeySyncLegacySelectedPlayer(player, hockeyPlayerSelectionTeamId(player));
+ toast(`${panel.label}: игрок ${slot} — ${player.name || player.id}`);
+ return true;
+}
+
+async function hockeyClearPlayerSelectionSlot(panel, slot) {
+ await hockeySetMatchValues(hockeyPlayerSelectionPatch(panel, slot, null), { refreshMapping: true });
+ if (panel.sync_selected_player) await hockeySyncLegacySelectedPlayer(null, "");
+ return true;
+}
+
+async function hockeyClearPlayerSelectionPanel(panel) {
+ const patch = {
+ [`player_select.${panel.id}._label`]: panel.label,
+ [`player_select.${panel.id}._slots`]: String(panel.slots),
+ [`player_select.${panel.id}._rule`]: panel.rule,
+ };
+ for (let slot = 1; slot <= panel.slots; slot += 1) Object.assign(patch, hockeyPlayerSelectionPatch(panel, slot, null));
+ await hockeySetMatchValues(patch, { refreshMapping: true });
+ if (panel.sync_selected_player) await hockeySyncLegacySelectedPlayer(null, "");
+}
+
+async function hockeyEnsurePlayerSelectionRuntimeValues() {
+ const gameId = hockeyTimerSelectedGameId();
+ const panels = hockeyPlayerSelectionPanels();
+ if (!gameId || !panels.length || state.hockeyPlayerPanelSeedPending) return false;
+ const current = hockeyMatchRuntimeValues();
+ const patch = {};
+ for (const panel of panels) {
+ const meta = {
+ [`player_select.${panel.id}._label`]: panel.label,
+ [`player_select.${panel.id}._slots`]: String(panel.slots),
+ [`player_select.${panel.id}._rule`]: panel.rule,
+ };
+ Object.entries(meta).forEach(([key, value]) => { if (!(key in current) || String(current[key]) !== String(value)) patch[key] = value; });
+ for (let slot = 1; slot <= panel.slots; slot += 1) {
+ for (const field of ["id", "db_id", "team_id", "side", "number", "name"]) {
+ const key = hockeyPlayerSelectionValueKey(panel.id, slot, field);
+ if (!(key in current)) patch[key] = "";
+ }
+ }
+ }
+ const entries = Object.entries(patch);
+ if (!entries.length) return false;
+ const signature = `${gameId}|${entries.map(([key, value]) => `${key}=${value}`).join("|")}`;
+ if (state.hockeyPlayerPanelSeedSignature === signature) return false;
+ state.hockeyPlayerPanelSeedSignature = signature;
+ state.hockeyPlayerPanelSeedPending = true;
+ try {
+ const language = hockeyGameControlLanguage();
+ let latest = null;
+ for (let offset = 0; offset < entries.length; offset += 60) {
+ const chunk = Object.fromEntries(entries.slice(offset, offset + 60));
+ latest = await hockeyGameControlRequest(`/games/${encodeURIComponent(gameId)}/control/values`, {
+ method: "PUT",
+ body: JSON.stringify({ values: chunk, language }),
+ });
+ hockeyStoreGameControl(gameId, latest, { render: false, dispatch: false });
+ }
+ await hockeyRefreshQuickPanelMapping();
+ renderRuntime();
+ return true;
+ } catch (error) {
+ console.error("Player selection panel seed failed", error);
+ return false;
+ } finally {
+ state.hockeyPlayerPanelSeedPending = false;
+ }
+}
+
+function hockeyEnsureRuntimeSideStack() {
+ let stack = document.getElementById("hockeyRuntimeSideStack");
+ if (!stack && el.runtimeViewport) {
+ stack = document.createElement("aside");
+ stack.id = "hockeyRuntimeSideStack";
+ stack.className = "hockey-runtime-side-stack";
+ el.runtimeViewport.appendChild(stack);
+ }
+ if (stack) el.runtimeViewport?.classList.add("has-hockey-pbp");
+ return stack;
+}
+
+function hockeyRemoveRuntimeSideStack() {
+ document.getElementById("hockeyRuntimeSideStack")?.remove();
+ document.getElementById("hockeyStandalonePbp")?.remove();
+ el.runtimeViewport?.classList.remove("has-hockey-pbp");
+}
+
+function renderHockeyPlayerSelectionWindows() {
+ document.querySelectorAll(".hockey-player-select-panel").forEach((node) => node.remove());
+ if (!el.runtimeView || !el.runtimeViewport || state.activeTab !== "main") return false;
+ const panels = hockeyPlayerSelectionPanels();
+ if (!panels.length) return false;
+ const stack = hockeyEnsureRuntimeSideStack();
+ if (!stack) return false;
+ for (const panel of panels) {
+ const stateKey = `hockey-player-panel:${panel.id}:collapsed`;
+ const hasStored = Object.prototype.hasOwnProperty.call(state.formValues, stateKey);
+ const collapsed = hasStored ? Boolean(state.formValues[stateKey]) : Boolean(panel.collapsed_default);
+ const slots = Array.from({ length: panel.slots }, (_, index) => hockeyPlayerSelectionSlot(panel, index + 1));
+ const filled = slots.filter((slot) => slot.id || slot.dbId).length;
+ const node = document.createElement("section");
+ node.className = `hockey-player-select-panel ${collapsed ? "is-collapsed" : ""}`;
+ node.dataset.playerPanelId = panel.id;
+ node.innerHTML = `
+
+ PLAYER SELECT${escapeHtml(panel.label)}${escapeHtml(panel.description || hockeyPlayerSelectionRuleLabel(panel.rule))}
+ ${filled}/${panel.slots}
+
+
+
${escapeHtml(hockeyPlayerSelectionRuleLabel(panel.rule))} · Mapping: player_select.${escapeHtml(panel.id)}.*
+
+ ${slots.map((slot, index) => {
+ const number = index + 1;
+ const filledSlot = Boolean(slot.id || slot.dbId);
+ const sideLabel = slot.side === "home" ? "HOME" : slot.side === "away" ? "AWAY" : "";
+ const title = [slot.number ? `#${slot.number}` : "", slot.name].filter(Boolean).join(" ") || (filledSlot ? `Игрок ${number}` : "Перетащите игрока");
+ const ids = filledSlot ? [sideLabel, slot.id ? `ID ${slot.id}` : "", slot.dbId ? `DB ${slot.dbId}` : ""].filter(Boolean).join(" · ") : "из состава слева или справа";
+ return `
+
${number}
+
${escapeHtml(title)}${escapeHtml(ids)}
+ ${filledSlot ? `
` : `
DROP`}
+
`;
+ }).join("")}
+
+ ${filled ? `
` : ""}
+
`;
+ stack.appendChild(node);
+ node.querySelector("[data-player-panel-collapse]")?.addEventListener("click", () => {
+ state.formValues[stateKey] = !collapsed;
+ renderRuntime();
+ });
+ node.querySelectorAll("[data-player-panel-slot]").forEach((slotNode) => {
+ slotNode.addEventListener("dragover", (event) => {
+ const player = state.hockeyDragPlayer || readHockeyDragData(event, "player");
+ if (!player) return;
+ event.preventDefault();
+ event.dataTransfer.dropEffect = "copy";
+ slotNode.classList.add("is-over");
+ });
+ slotNode.addEventListener("dragleave", () => slotNode.classList.remove("is-over"));
+ slotNode.addEventListener("drop", async (event) => {
+ event.preventDefault();
+ slotNode.classList.remove("is-over");
+ const player = state.hockeyDragPlayer || readHockeyDragData(event, "player");
+ if (!player) return;
+ await hockeySetPlayerSelectionSlot(panel, Number(slotNode.dataset.playerPanelSlot || 1), player);
+ });
+ });
+ node.querySelectorAll("[data-player-panel-clear-slot]").forEach((button) => button.addEventListener("click", async (event) => {
+ event.preventDefault(); event.stopPropagation();
+ await hockeyClearPlayerSelectionSlot(panel, Number(button.dataset.playerPanelClearSlot || 1));
+ }));
+ node.querySelector("[data-player-panel-clear-all]")?.addEventListener("click", async () => hockeyClearPlayerSelectionPanel(panel));
+ }
+ setTimeout(() => hockeyEnsurePlayerSelectionRuntimeValues().catch(() => {}), 0);
+ return true;
+}
+
+function renderHockeyRuntimeSideWindows() {
+ hockeyRemoveRuntimeSideStack();
+ if (!el.runtimeView || !el.runtimeViewport || state.activeTab !== "main") return false;
+ const players = renderHockeyPlayerSelectionWindows();
+ const pbp = renderStandaloneHockeyPlayByPlayWindow();
+ const stack = document.getElementById("hockeyRuntimeSideStack");
+ if (!stack || !stack.children.length) hockeyRemoveRuntimeSideStack();
+ return Boolean(players || pbp);
+}
+
function hockeyEventCategory(item) {
const declared = String(item?.category || "").trim().toLowerCase();
// Prefer the explicit Stat2TV code (`pn`, `go`, ...). `type` can contain a
@@ -8282,7 +8674,6 @@ function hockeyEventIconMarkup(category, language, extraClass = "") {
function renderStandaloneHockeyPlayByPlayWindow() {
document.getElementById("hockeyStandalonePbp")?.remove();
- el.runtimeViewport?.classList.remove("has-hockey-pbp");
// Play-by-play belongs to the Game tab. It stays rendered underneath top-right
// menus/settings so opening an operator window never destroys its state.
@@ -8358,8 +8749,9 @@ function renderStandaloneHockeyPlayByPlayWindow() {
state.formValues[collapsedKey] = !collapsed;
renderRuntime();
});
- el.runtimeViewport.appendChild(windowNode);
- el.runtimeViewport.classList.add("has-hockey-pbp");
+ const sideStack = hockeyEnsureRuntimeSideStack();
+ if (!sideStack) return false;
+ sideStack.appendChild(windowNode);
return true;
}
@@ -11388,7 +11780,7 @@ function renderHockeyPenaltyDashboard(node, component, runtime) {
state.config.components.filter((component) => !component.hidden && component.props?.runtimeHidden !== true && state.runtimeVisibility[component.action_id] !== false && isEffectivelyOnActiveTab(component)).sort((a, b) => Number(a.z) - Number(b.z)).forEach((component) => {
const wrapper = document.createElement("div"); wrapper.className = "runtime-component"; Object.assign(wrapper.style, { left: `${component.x}px`, top: `${component.y}px`, width: `${component.w}px`, height: `${component.h}px`, zIndex: String(component.z) }); wrapper.appendChild(renderComponent(component, true)); el.runtimeStage.appendChild(wrapper);
});
- renderStandaloneHockeyPlayByPlayWindow();
+ renderHockeyRuntimeSideWindows();
renderHockeyQuickCommandDock();
Object.entries(shootoutRosterScroll).forEach(([side, top]) => {
const list = el.runtimeStage.querySelector(`.hso-roster.side-${side} .hso-player-list`);
@@ -12763,8 +13155,7 @@ function renderHockeyPenaltyDashboard(node, component, runtime) {
el.modalHost.querySelector(".modal-backdrop").addEventListener("click", (event) => {
if (!locked && event.target.classList.contains("modal-backdrop")) closeModal();
});
- document.getElementById("hockeyStandalonePbp")?.remove();
- el.runtimeViewport?.classList.remove("has-hockey-pbp");
+ hockeyRemoveRuntimeSideStack();
scheduleRuntimeScale();
scheduleStyledControls();
}
@@ -12781,7 +13172,7 @@ function renderHockeyPenaltyDashboard(node, component, runtime) {
state.timerQuickEditorInterval = null;
state.modalLocked = false;
el.modalHost.innerHTML = "";
- renderStandaloneHockeyPlayByPlayWindow();
+ renderHockeyRuntimeSideWindows();
scheduleRuntimeScale();
}
@@ -12897,10 +13288,9 @@ function renderHockeyPenaltyDashboard(node, component, runtime) {
window.addEventListener("hockey:navigation-toggle", (event) => {
const open = Boolean(event?.detail?.open);
if (open) {
- document.getElementById("hockeyStandalonePbp")?.remove();
- el.runtimeViewport?.classList.remove("has-hockey-pbp");
+ hockeyRemoveRuntimeSideStack();
} else {
- renderStandaloneHockeyPlayByPlayWindow();
+ renderHockeyRuntimeSideWindows();
}
scheduleRuntimeScale();
});
diff --git a/ui_builder/static/styles.css b/ui_builder/static/styles.css
index 283e22d..adb7b5c 100644
--- a/ui_builder/static/styles.css
+++ b/ui_builder/static/styles.css
@@ -7251,3 +7251,115 @@ body.hockey-navigation-open .runtime-viewport.has-hockey-pbp { gap: 14px !import
text-transform: uppercase;
letter-spacing: .035em;
}
+
+
+/* BUILD80 — universal player-selection side panels + compact editor. */
+.hockey-runtime-side-stack {
+ flex: 0 0 clamp(330px, 23vw, 410px);
+ width: clamp(330px, 23vw, 410px);
+ max-height: 100%;
+ min-height: 0;
+ display: grid;
+ align-content: start;
+ gap: 8px;
+ overflow: auto;
+ scrollbar-width: thin;
+}
+.hockey-runtime-side-stack > .hockey-pbp-window,
+.hockey-runtime-side-stack > .hockey-pbp-window[style] {
+ position: relative !important;
+ inset: auto !important;
+ flex: none !important;
+ width: 100% !important;
+ max-width: none !important;
+ height: min(560px, 70vh);
+ max-height: 70vh;
+ margin: 0;
+}
+.hockey-runtime-side-stack > .hockey-pbp-window.is-collapsed { width: 100% !important; height: auto; }
+.hockey-player-select-panel {
+ overflow: hidden;
+ color: #edf5fc;
+ border: 1px solid #36546e;
+ border-radius: 13px;
+ background: #071522;
+ box-shadow: 0 10px 28px rgba(0,0,0,.25);
+}
+.hockey-player-select-head {
+ min-height: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ padding: 8px 9px 8px 12px;
+ border-bottom: 1px solid #243d54;
+ background: linear-gradient(100deg, rgba(30,63,88,.8), rgba(8,22,35,.96));
+}
+.hockey-player-select-head > div:first-child { min-width:0; display:grid; gap:2px; }
+.hockey-player-select-head span { color:#48dfbd; font-size:7px; font-weight:950; letter-spacing:.15em; }
+.hockey-player-select-head strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:950; }
+.hockey-player-select-head small { overflow:hidden; color:#6f8aa2; text-overflow:ellipsis; white-space:nowrap; font-size:7px; font-weight:800; }
+.hockey-player-select-actions { display:flex; align-items:center; gap:5px; }
+.hockey-player-select-actions b { min-width:31px; height:27px; display:grid; place-items:center; border:1px solid #38556d; border-radius:8px; background:#10283b; font:950 9px "Roboto Mono",Consolas,monospace; }
+.hockey-player-select-actions button { width:27px; height:27px; display:grid; place-items:center; padding:0; color:#b9cada; border:1px solid #38556d; border-radius:8px; background:#10283b; font-size:15px; font-weight:950; cursor:pointer; }
+.hockey-player-select-actions button:hover { color:#07150f; border-color:transparent; background:#48dfbd; }
+.hockey-player-select-panel.is-collapsed .hockey-player-select-body { display:none; }
+.hockey-player-select-panel.is-collapsed .hockey-player-select-head { border-bottom:0; }
+.hockey-player-select-body { display:grid; gap:6px; padding:7px; }
+.hockey-player-select-rule { color:#6d859b; font-size:7px; font-weight:800; }
+.hockey-player-select-rule code { color:#8db8d9; font:800 7px "Roboto Mono",Consolas,monospace; }
+.hockey-player-select-slots { display:grid; gap:5px; }
+.hockey-player-select-slot {
+ min-height:45px;
+ display:grid;
+ grid-template-columns:27px minmax(0,1fr) auto;
+ gap:7px;
+ align-items:center;
+ padding:6px 7px;
+ border:1px dashed #38546d;
+ border-radius:9px;
+ background:#0a1a29;
+ transition:border-color .12s ease, background .12s ease, box-shadow .12s ease;
+}
+.hockey-player-select-slot.is-filled { border-style:solid; border-color:#2d5168; }
+.hockey-player-select-slot.is-over { border-color:#48dfbd; background:#0e302a; box-shadow:0 0 0 2px rgba(72,223,189,.14) inset; }
+.hockey-player-select-index { width:24px; height:24px; display:grid; place-items:center; color:#9fb3c4; border:1px solid #355169; border-radius:7px; background:#10283b; font:950 9px "Roboto Mono",Consolas,monospace; }
+.hockey-player-select-slot > div { min-width:0; display:grid; gap:2px; }
+.hockey-player-select-slot strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; font-weight:950; }
+.hockey-player-select-slot small { overflow:hidden; color:#6e879d; text-overflow:ellipsis; white-space:nowrap; font:750 7px "Roboto Mono",Consolas,monospace; }
+.hockey-player-select-slot > i { color:#4c6980; font:900 7px "Roboto Mono",Consolas,monospace; font-style:normal; }
+.hockey-player-select-slot > button { width:22px; height:22px; padding:0; color:#8ea2b4; border:1px solid #354b60; border-radius:7px; background:#102133; cursor:pointer; }
+.hockey-player-select-slot > button:hover { color:#fff; border-color:#d45f6c; background:#772532; }
+.hockey-player-select-clear { justify-self:end; padding:5px 8px; color:#8ca1b4; border:1px solid #30475c; border-radius:7px; background:#0d1e2d; font-size:7px; font-weight:900; cursor:pointer; }
+.hockey-player-select-clear:hover { color:#fff; border-color:#516d85; }
+
+.player-selection-editor { margin-top:14px; padding-top:14px; border-top:1px solid #263d53; }
+.player-selection-editor > header { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:8px; }
+.player-selection-editor > header > div { display:grid; gap:3px; }
+.player-selection-editor > header span { color:#48dfbd; font-size:8px; font-weight:950; letter-spacing:.12em; }
+.player-selection-editor > header strong { font-size:13px; }
+.player-selection-editor > header small { color:#738da4; font-size:8px; }
+.player-selection-editor-list { display:grid; gap:6px; }
+.player-selection-editor-row {
+ display:grid;
+ grid-template-columns:28px 82px minmax(135px,1fr) minmax(125px,.8fr) 65px minmax(145px,.9fr) 135px 135px minmax(160px,1fr) 62px 34px;
+ gap:6px;
+ align-items:end;
+ padding:7px;
+ border:1px solid #2b4359;
+ border-radius:9px;
+ background:#0b1a28;
+}
+.player-selection-editor-row label { min-width:0; display:grid; gap:3px; color:#7890a7; font-size:7px; font-weight:900; }
+.player-selection-editor-row input,.player-selection-editor-row select { min-width:0; height:30px; }
+.player-selection-editor-row .shortcut-inline-check { align-self:center; display:flex; align-items:center; gap:5px; }
+.player-selection-editor-description { min-width:150px; }
+.player-selection-editor-order { display:flex; gap:3px; }
+@media (max-width: 1450px) {
+ .player-selection-editor-row { grid-template-columns:28px 82px minmax(140px,1fr) minmax(120px,1fr) 65px minmax(140px,1fr) 130px 130px; }
+ .player-selection-editor-description,.player-selection-editor-order,.player-selection-editor-row > .icon-btn { grid-column:auto; }
+}
+@media (max-width:980px) {
+ .hockey-runtime-side-stack { flex-basis:290px; width:290px; }
+ .player-selection-editor-row { grid-template-columns:1fr 1fr; }
+}