/* Стандартное модальное окно. Открытие, Escape и возврат фокуса обеспечивает dialog. */
dialog.ui-window { box-sizing: border-box; width: min(560px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--client-window-border, #5f5341); border-radius: 8px; box-shadow: 0 0 0 1px #5f534126, 0 12px 35px #0004; background: var(--ch-panel, var(--ui-window-panel, #20242a)); color: var(--ch-text, var(--text, #efe6d6)); font: 14px/1.5 "Segoe UI", sans-serif; }
dialog.ui-window[open] { display: flex; flex-direction: column; }
dialog.ui-window::backdrop { background: #0009; }
.ui-window > .ui-window-header { box-sizing: border-box; flex: 0 0 40px; min-height: 40px; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 3.5px 0 16px; border-bottom: 1px solid var(--theme-3e3930, #3e3930); background: var(--theme-14171b, var(--ui-window-bar, #14171b)); user-select: none; }
.ui-window-header h2 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/1.3 "Segoe UI", sans-serif; }
.ui-window .ui-window-close { box-sizing: border-box; display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; margin: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ch-dim, var(--muted, #aaa79f)); cursor: pointer; line-height: 0; }
.ui-window-close > svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ui-window .ui-window-close:hover { background: var(--ui-window-close-hover, color-mix(in srgb, var(--ch-text, var(--text, #efe6d6)) 8%, transparent)); color: var(--ch-text, var(--text, #efe6d6)); }
.ui-window .ui-window-close:focus-visible { outline: 1px solid var(--ch-gold, var(--gold, #c7a76b)); outline-offset: 2px; }
.ui-window > .ui-window-body { min-height: 0; overflow: auto; padding: 16px; }
.ui-window > .ui-window-footer { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; padding: 10px 16px; border-top: 1px solid var(--theme-3e3930, #3e3930); background: var(--theme-14171b, var(--ui-window-bar, #14171b)); }

/* Зоны окна сохраняют контраст независимо от фона страницы. */
:root[data-theme="light"] { --ui-window-panel: #ede1c5; --ui-window-bar: #ded3be; }
.ui-window > .ui-window-body { position: relative; isolation: isolate; background: var(--ch-panel, var(--ui-window-panel, #20242a)); }
.ui-window > .ui-window-body::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--ch-gold, var(--gold, #c7a76b)); opacity: .10; mask: var(--ui-window-art, none) 0 0 / var(--background-size, 760px) repeat; }
.ui-window > .ui-window-body:not([data-pattern="true"])::before { display: none; }
.ch-app[data-background]:not([data-background="none"]) .ui-window > .ui-window-body::before { display: block; }

.ch-app[data-background="azeroth"] .ui-window { --ui-window-art: url("../backgrounds/azeroth.svg"); }

.ch-app[data-background="orcs"] .ui-window { --ui-window-art: url("../backgrounds/orcs.svg"); }

.ch-app[data-background="night-elves"] .ui-window { --ui-window-art: url("../backgrounds/night-elves.svg"); }

.ch-app[data-background="trolls"] .ui-window { --ui-window-art: url("../backgrounds/trolls.svg"); }

.ch-app[data-background="dwarves"] .ui-window { --ui-window-art: url("../backgrounds/dwarves.svg"); }

.ch-app[data-background="undead"] .ui-window { --ui-window-art: url("../backgrounds/undead.svg"); }