:root { color-scheme: dark; --bg: #0d0f12; --sidebar: #121418; --panel: #15181d; --panel-2: #191c22; --line: #2a2e36; --line-strong: #3a404a; --text: #e7e9ed; --muted: #929aa6; --dim: #68717d; --blue: #4b6bdf; --blue-hover: #5a78e4; --green: #3ca477; --amber: #c68a36; --red: #d15c54; /* Jedna skala klikalnych elementów: pola, przyciski i przełączniki mają tę samą wysokość, więc sąsiadujące kontrolki nie rozjeżdżają się w pionie. */ --control-h: 36px; --control-h-sm: 32px; /* Wysokość etykiety pola razem z odstępem do kontrolki pod nią. */ --field-label-h: 21px; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font-size: 14px; transition: background 320ms; } /* Atak gracza na którekolwiek konto. Tło całej strony robi się czerwone, żeby alarm był widoczny także wtedy, gdy panel jest tylko kątem oka na drugim monitorze. Odwet baronów i fortec go nie wywołuje. */ body.under-attack { background: #2a0f10; animation: under-attack-pulse 2.4s ease-in-out infinite; } body.under-attack .sidebar { background: #241012; border-right-color: #6d2a2a; } body.under-attack .account-bar { background: rgba(50, 18, 20, .97); border-bottom-color: #6d2a2a; } body.under-attack .topbar { border-bottom-color: #6d2a2a; } @keyframes under-attack-pulse { 0%, 100% { background-color: #2a0f10; } 50% { background-color: #3d1416; } } @media (prefers-reduced-motion: reduce) { body.under-attack { animation: none; } } button, input, select { font: inherit; } button { color: inherit; } .app { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); } .account-bar { position: sticky; top: 0; z-index: 50; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-bottom: 1px solid var(--line); background: rgba(16, 18, 22, .97); backdrop-filter: blur(8px); } .account-bar-label { flex: 0 0 auto; color: var(--dim); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .account-tabs { min-width: 0; flex: 1; display: flex; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: thin; } .account-tab, .account-add { min-height: var(--control-h-sm); flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 3px; color: #aeb4bd; background: #15181d; font-size: 10px; cursor: pointer; } .account-tab:hover, .account-add:hover { color: var(--text); border-color: var(--line-strong); } .account-tab.active { color: #fff; border-color: #526bc7; background: #25345f; } .account-tab i { width: 6px; height: 6px; border-radius: 50%; background: #59616d; } .account-tab i.running { background: var(--green); } .account-tab i.waiting { background: var(--amber); } .account-tab i.error { background: #d36d65; } .account-tab i.attack { background: var(--red); } .account-tab.under-attack { color: #ffd9d6; border-color: #8d3a36; background: #3a1618; } .account-tab.under-attack small { opacity: 1; font-weight: 700; } .account-tab small { color: inherit; opacity: .62; } .account-add { color: #c6cad1; background: #1a1d23; } /* Sesja panelu trzyma sie prawego rogu, za lista kont. */ .account-bar-session { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-left: auto; padding-left: 10px; } .account-bar-user { color: var(--dim); font-size: 10px; font-weight: 600; } .account-bar-user:empty { display: none; } .account-bar-logout { min-height: var(--control-h-sm); flex: 0 0 auto; padding: 0 10px; border: 1px solid var(--line); border-radius: 3px; color: #aeb4bd; background: #15181d; font-size: 10px; cursor: pointer; } .account-bar-logout:hover { color: var(--text); border-color: var(--line-strong); } .sidebar { position: sticky; top: 44px; height: calc(100vh - 44px); display: flex; flex-direction: column; padding: 12px 12px 14px; background: var(--sidebar); border-right: 1px solid var(--line); } .navigation { min-height: 0; flex: 1; overflow-y: auto; padding-right: 3px; scrollbar-width: none; } /* Menu przewija sie dalej, ale pasek zostaje ukryty. */ .navigation::-webkit-scrollbar { width: 0; height: 0; } .nav-item { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 7px 9px; margin-bottom: 3px; border: 1px solid transparent; border-radius: 3px; color: #aab0ba; background: transparent; text-align: left; cursor: pointer; } .nav-item:hover { color: var(--text); background: #181b20; } .nav-item:disabled { cursor: default; opacity: .58; } .nav-item:disabled:hover { color: #aab0ba; background: transparent; } .nav-item.active { color: var(--text); border-color: var(--line); background: #1b1e24; } .nav-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; color: var(--muted); font: 12px Consolas, monospace; } .nav-item > span:last-child { min-width: 0; display: flex; flex-direction: column; } .nav-item b { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .nav-item small { margin-top: 2px; color: var(--dim); font-size: 10px; } .nav-section-title { display: flex; justify-content: space-between; padding: 18px 9px 7px; color: var(--dim); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; } .script-group-title { display: flex; justify-content: space-between; padding: 12px 9px 5px; color: #59626e; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .script-nav-icon { position: relative; width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; } .script-nav-icon > .dot { position: absolute; right: -2px; bottom: -1px; z-index: 1; box-shadow: 0 0 0 2px var(--sidebar); } .dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #58606b; } .dot.ready, .dot.running { background: var(--green); } .dot.waiting { background: var(--amber); } .dot.error { background: var(--red); } .content { min-width: 0; padding: 25px 30px 38px; } .topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 20px; margin: 0 0 18px; border-bottom: 1px solid var(--line); } .section-path { margin: 0 0 6px; color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; } h1, h2, h3, h4, p { margin-top: 0; } h1 { margin-bottom: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; } h2 { margin-bottom: 4px; font-size: 14px; font-weight: 600; } h3 { margin-bottom: 13px; font-size: 12px; font-weight: 600; } h4 { margin-bottom: 3px; font-size: 12px; } .topbar-actions { display: flex; align-items: center; gap: 7px; } .connection-state { min-height: var(--control-h); display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); color: var(--muted); background: var(--panel); font-size: 11px; } .connection-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .connection-state.login i { background: var(--amber); } .connection-state.error i { background: var(--red); } .notification-center { position: relative; } .notification-button { position: relative; min-height: var(--control-h); min-width: var(--control-h); display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: var(--panel); font-size: 14px; line-height: 1; cursor: pointer; } .notification-button:hover { border-color: var(--line-strong); color: var(--text); } .notification-button.has-unread { border-color: #74413d; color: #eca8a2; } .notification-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; line-height: 16px; text-align: center; } .notification-badge[hidden] { display: none; } .notification-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: min(380px, calc(100vw - 40px)); border: 1px solid var(--line-strong); border-radius: 3px; background: var(--panel); box-shadow: 0 14px 34px rgba(0,0,0,.42); } .notification-panel[hidden] { display: none; } .notification-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .notification-panel-head strong { display: block; font-size: 12px; } .notification-panel-head small { display: block; margin-top: 3px; color: var(--dim); font-size: 10px; } .notification-list { max-height: 340px; overflow-y: auto; } .notification-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; } .notification-row:last-child { border-bottom: 0; } .notification-row.unread { background: var(--panel-2); border-left: 2px solid var(--red); } .notification-row-content { min-width: 0; } .notification-row-content b { display: block; font-size: 11px; font-weight: 600; } .notification-row-content p { margin: 3px 0 0; color: var(--muted); font-size: 11px; } .notification-row-content > span { display: block; margin-top: 4px; color: var(--dim); font-size: 10px; } .view { display: none; } .view.active { display: block; } .summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--panel); } .summary-item { min-height: 78px; display: flex; flex-direction: column; justify-content: center; padding: 14px 17px; border-right: 1px solid var(--line); } .summary-item:last-child { border-right: 0; } .summary-item > span { margin-bottom: 8px; color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; } .summary-item strong { font-size: 16px; font-weight: 600; } /* Sześć liczników ruchów tworzy dwie równe trójki. Każdy kafelek ma własny znak z klienta GGE oraz delikatny akcent, więc drugi rząd nie wygląda jak niedokończona czterokolumnowa tabela. */ #attacksView .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 0; background: transparent; } #attacksView .summary-item { position: relative; min-width: 0; min-height: 92px; display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; justify-content: initial; gap: 4px 13px; overflow: hidden; padding: 15px 17px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(135deg, #181c22 0%, #14171c 72%); } #attacksView .summary-item:last-child { border-right: 1px solid var(--line); } #attacksView .summary-item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #5265a8; opacity: .85; } #attacksView .summary-item:nth-child(2)::before { background: #4e8b72; } #attacksView .summary-item:nth-child(3)::before { background: #a84f52; } #attacksView .summary-item:nth-child(4)::before { background: #9a7a43; } #attacksView .summary-item:nth-child(5)::before { background: #6076c7; } #attacksView .summary-item:nth-child(6)::before { background: #7b5ea7; } #attacksView .summary-item > span { grid-column: 2; align-self: end; margin: 0; } #attacksView .summary-item > strong { grid-column: 2; align-self: start; min-width: 0; color: #f0f2f6; font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } #attacksView #freeCommanderCount { font-size: 15px; line-height: 1.35; } .attack-summary-icon { grid-row: 1 / 3; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #303641; border-radius: 50%; background: radial-gradient(circle, #252b35 0%, #15191f 72%); } .game-asset-summary { width: 38px; height: 38px; background: transparent; } .attack-summary-icon[data-attack-summary-icon="returning"] img { transform: scaleX(-1); } .attack-summary-icon[data-attack-summary-icon="incoming"] { border-color: #513035; background: radial-gradient(circle, #342024 0%, #171719 72%); } .panel { border: 1px solid var(--line); border-radius: 3px; background: var(--panel); } .console-panel { margin-top: 14px; } .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 15px 17px; border-bottom: 1px solid var(--line); } .panel-heading p, .section-title-row p, .rules-heading p { margin-bottom: 0; color: var(--dim); font-size: 11px; } .account-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 25%, 440px); gap: 14px; margin-top: 14px; } .game-preview-panel { min-width: 0; } .manual-control-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 17px; border-bottom: 1px solid var(--line); background: #101318; } .manual-control-bar > div { min-width: 0; display: grid; gap: 3px; } .manual-control-bar strong { color: #d9dde3; font-size: 11px; } .manual-control-bar span { color: var(--dim); font-size: 10px; } .manual-control-bar.active { background: rgba(33, 83, 64, .20); } .manual-control-bar.active strong, .manual-control-bar.active .switch-line > span { color: #8bd8b6; } .live-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; white-space: nowrap; } .live-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .game-preview-frame { position: relative; min-height: 240px; max-height: calc(100vh - 300px); aspect-ratio: 16 / 8.4; display: grid; place-items: center; overflow: hidden; background: #080a0c; } .game-preview-frame img { width: 100%; height: 100%; display: block; object-fit: contain; } .game-preview-frame img[hidden] { display: none; } .game-preview-frame p { max-width: 340px; margin: 0; padding: 24px; color: var(--dim); font-size: 11px; line-height: 1.6; text-align: center; } .game-preview-status { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid rgba(98,108,123,.72); border-radius: 3px; color: #d4d8de; background: rgba(9,11,14,.88); backdrop-filter: blur(3px); font-size: 9px; } .game-preview-status[hidden] { display: none; } .game-preview-status strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; } .game-preview-status span { flex: 0 0 auto; color: var(--dim); } .session-panel { min-width: 0; } .detail-list { margin: 0; padding: 8px 17px; } .detail-list div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .detail-list div:last-child { border-bottom: 0; } .detail-list dt { color: var(--dim); font-size: 10px; } .detail-list dd { min-width: 0; margin: 0; color: #c7ccd3; font-size: 11px; overflow-wrap: anywhere; } /* Lista szczegółów miała natywne kontrolki przeglądarki obok własnych stylów panelu. Dostają tę samą ramkę, tło i wysokość co pola w edytorze skryptów. */ .detail-list dd input, .detail-list dd select { width: 100%; max-width: 230px; height: var(--control-h-sm); padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--text); background: #101318; font-size: 11px; outline: none; } .detail-list dd input:focus, .detail-list dd select:focus { border-color: #5a6fbd; } .field-hint { display: block; margin-top: 6px; color: var(--dim); font-size: 9px; line-height: 1.45; } .currency-balance { display: flex; align-items: baseline; gap: 9px; } .currency-change { color: var(--dim); font-size: 9px; font-weight: 600; white-space: nowrap; } .currency-change.positive { color: #6fcf9d; } .currency-change.negative { color: #e58a7d; } .currency-change.neutral { color: var(--dim); } .currency-change::after { content: " / sesja"; color: var(--dim); font-size: 8px; font-weight: 400; } .currency-change.unavailable::after { content: ""; } .resource-warnings { margin: 0 17px 16px; border: 1px solid #68443c; background: #211816; } .resource-warnings[hidden] { display: none; } .resource-warnings h3 { margin: 0; padding: 9px 11px; border-bottom: 1px solid #68443c; color: #e3a295; font-size: 10px; } .resource-warning-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(95px, .7fr) minmax(125px, .9fr); gap: 10px; padding: 9px 11px; border-top: 1px solid rgba(104,68,60,.5); } .resource-warning-row:first-child { border-top: 0; } .resource-warning-row > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .resource-warning-row > .resource-warning-identity { flex-direction: row; align-items: center; gap: 8px; } .resource-warning-identity > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .resource-warning-row strong { min-width: 0; color: #d5d8de; font-size: 10px; overflow-wrap: anywhere; } .resource-warning-row small { color: var(--dim); font-size: 9px; } .resource-warning-row .resource-negative { color: #e38e83; } .resource-warning-row .resource-frozen { color: #79bfe8; } .resource-warning-row.resource-frozen-row { border-left-color: #5799c3; } .data-panel { margin-top: 14px; overflow: hidden; } .data-table { overflow-x: auto; } .data-table-head, .data-table-row { min-width: 720px; display: grid; align-items: center; gap: 14px; padding: 10px 16px; } .data-table-head { min-height: 34px; color: var(--dim); background: #12151a; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; } .data-table-row { min-height: 54px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; } .data-table-row:first-child { border-top: 0; } .events-table .data-table-head, .events-table .data-table-row { grid-template-columns: minmax(230px, 1fr) 150px; } .castles-table .data-table-head, .castles-table .data-table-row { grid-template-columns: minmax(210px, 1.25fr) 90px 120px minmax(230px, 1fr) 100px; } .unit-combat-summary { display: grid; gap: 5px; } .unit-combat-summary > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .unit-combat-summary b { color: var(--dim); font-size: 10px; font-weight: 600; } .movements-table .data-table-head, .movements-table .data-table-row { grid-template-columns: 105px minmax(190px, 1fr) 120px minmax(190px, 1fr) 120px; } .commanders-table .data-table-head, .commanders-table .data-table-row { grid-template-columns: 85px minmax(180px, 1fr) 105px 120px minmax(190px, 1fr); } .battle-reports-table .data-table-head, .battle-reports-table .data-table-row { grid-template-columns: 100px minmax(170px, 1fr) 100px 135px 120px 145px; } .action-history-table .data-table-head, .action-history-table .data-table-row { grid-template-columns: 115px 180px minmax(260px, 1fr) 155px; } .sort-header { display: flex; align-items: center; gap: 5px; padding: 0; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; background: none; cursor: pointer; } .sort-header:hover { color: #c8d0e5; } .sort-header.active { color: #8fa6ff; } .sort-mark { font-size: 8px; font-style: normal; } .targets-table .data-table-head, .targets-table .data-table-row { grid-template-columns: minmax(180px, 1fr) 165px 95px 110px 130px; } .data-cell-main, .data-cell-sub { display: block; } .data-cell-main { color: #d6dae0; font-size: 11px; font-weight: 600; } .data-cell-sub { margin-top: 4px; color: var(--dim); font-size: 9px; font-style: normal; overflow-wrap: anywhere; } .status-pill { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 6px; margin: 1px 2px 1px 0; border: 1px solid var(--line-strong); border-radius: 10px; color: #aab1bb; background: #1c2026; font-size: 9px; font-style: normal; white-space: nowrap; } .status-pill.ready, .status-pill.outgoing { border-color: #30664f; color: #77c19e; background: #14251f; } .status-pill.incoming, .status-pill.blocked { border-color: #69403b; color: #dd8d86; background: #271817; } .status-pill.returning { border-color: #65502e; color: #d4aa61; background: #241e14; } .status-pill.incoming.hostile { border-color: #a8443c; color: #ffcfca; background: #3a1618; font-weight: 700; } .status-pill.alliance-attack { border-color: #73502e; color: #e3ae75; background: #2b2116; } .status-pill.support, .status-pill.alliance-support { border-color: #30664f; color: #77c19e; background: #14251f; } .status-pill.account-attack { border-color: #a8443c; color: #ffcfca; background: #3a1618; font-weight: 700; } /* Kampania doradcy: jeden rozkaz, po ktorym serwer uderza dalej sam. Ma wlasny kolor, bo nie zachowuje sie jak zwykly atak wyslany pojedynczo. */ .status-pill.advisor { border-color: #5a4a8a; color: #b9a8ea; background: #201c33; } .status-pill-with-icon { padding: 1px 6px 1px 2px; gap: 4px; } .movement-kind-cell { display: flex; align-items: center; gap: 7px; } .movement-kind-cell > span { min-width: 0; } .castle-attack-note { color: #eca8a2 !important; } .data-table-row:has(.status-pill.incoming.hostile), .data-table-row:has(.status-pill.account-attack) { background: #2a1416; } .data-empty { margin: 0; padding: 20px 17px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11px; text-align: center; } .data-empty[hidden] { display: none; } .target-note { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 14px; padding: 13px 16px; border-color: #35415d; background: #151a24; } .target-note strong { color: #bdc9ed; font-size: 11px; } .target-note p { margin: 5px 0 0; color: #7f899d; font-size: 10px; line-height: 1.5; } /* Zakładka celów ma trzy kafelki podsumowania, więc siatka dostaje własną liczbę kolumn zamiast domyślnych czterech. */ #targetsView .summary-grid { grid-template-columns: repeat(3, 1fr); } .target-filters { display: flex; gap: 8px; } .target-filters label { display: flex; flex-direction: column; gap: 5px; color: #7f899d; font-size: 9px; white-space: nowrap; } .target-filters select { min-width: 170px; height: var(--control-h-sm); padding: 0 8px; border: 1px solid #35415d; color: #c8d0e5; background: #10141c; } /* ——— Mapa krainy ——— Rysunek jest w SVG, ale wszystkie kolory idą z tych samych zmiennych co reszta panelu, żeby alternatywna skóra pokolorowała mapę bez drugiego zestawu wartości w JavaScripcie. */ .map-panel { margin-top: 14px; overflow: hidden; } .map-legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--dim); font-size: 10px; } .map-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .map-legend i { width: 9px; height: 9px; flex: 0 0 auto; } .map-legend .map-key-castle { background: var(--blue); transform: rotate(45deg); } .map-legend .map-key-target { border-radius: 50%; background: var(--amber); } .map-legend .map-key-taken { border-radius: 50%; background: var(--green); } .map-legend .map-key-busy { border-radius: 50%; background: #5b5240; } .map-legend .map-key-hostile { background: var(--red); } .map-legend .map-key-army { background: var(--blue); clip-path: polygon(0 0, 100% 50%, 0 100%); } .map-legend .map-key-alliance-attack, .map-legend .map-key-support, .map-legend .map-key-account-attack, .map-legend .map-key-advisor, .map-legend .map-key-outgoing, .map-legend .map-key-returning, .map-legend .map-key-spy { width: 14px; height: 2px; } .map-legend .map-key-outgoing { background: var(--blue); } .map-legend .map-key-returning { background: var(--muted); } .map-legend .map-key-spy { background: #6f9fc4; } .map-legend .map-key-advisor { background: #9d8ae0; } /* Najechanie na pozycje legendy zostawia na rysunku tylko ja. Zamki konta nigdy nie gasna: bez nich nie da sie odczytac, gdzie ten ruch sie dzieje. */ .map-legend [data-map-key] { padding: 2px 5px; border-radius: 3px; cursor: help; outline: 0; } .map-legend [data-map-key]:hover, .map-legend [data-map-key]:focus-visible { color: var(--text); background: #1b1f26; } .map-canvas[data-map-highlight] .map-move-group, .map-canvas[data-map-highlight] .map-target { opacity: .06; transition: opacity 120ms; } .map-canvas[data-map-highlight] .map-move-group.map-highlight, .map-canvas[data-map-highlight] .map-target.map-highlight { opacity: 1; } /* Podswietlony cel ma byc widoczny mimo malej srednicy przy oddalonym kadrze. */ .map-canvas[data-map-highlight] .map-target.map-highlight { stroke: #f2f5fa; stroke-width: 1.4; } /* „Pozycja armii" pokazuje same znaczniki: trasy gasna, zeby nie zlewaly sie w plame przy kilkunastu marszach naraz. */ .map-canvas[data-map-highlight="army"] .map-move { opacity: .08; } .map-canvas[data-map-highlight="army"] .map-move-endpoints { opacity: .08; } /* „Zamek" i „zagrozenie" dotycza wylacznie znacznikow zamkow, wiec cala reszta rysunku schodzi na drugi plan. */ .map-canvas[data-map-highlight="hostile"] .map-castle:not(.hostile) { opacity: .3; } .map-canvas[data-map-highlight="hostile"] .map-castle-name:not(.hostile), .map-canvas[data-map-highlight="hostile"] .map-castle-coords { opacity: .3; } .map-legend .map-key-alliance-attack { background: #d69146; } .map-legend .map-key-support { background: var(--green); } .map-legend .map-key-account-attack { background: var(--red); } .map-kingdoms { display: flex; gap: 5px; overflow-x: auto; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #12151a; scrollbar-width: thin; } .map-kingdom { min-height: var(--control-h-sm); flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: var(--panel); cursor: pointer; } .map-kingdom:hover { color: var(--text); border-color: var(--line-strong); } .map-kingdom.active { color: #fff; border-color: #526bc7; background: #25345f; } .map-kingdom b { font-size: 11px; font-weight: 600; white-space: nowrap; } .map-kingdom small { color: var(--dim); font-size: 9px; font-variant-numeric: tabular-nums; } .map-kingdom.active small { color: #b9c5ee; } .map-canvas { contain: layout paint; background: #0b0e12; cursor: grab; touch-action: none; } .map-canvas.dragging { cursor: grabbing; } .map-canvas.map-previewing .map-scene { pointer-events: none; shape-rendering: optimizeSpeed; text-rendering: optimizeSpeed; } /* Wysoka krajina nie może zająć całego ekranu — rysunek dopasowuje się do okna. */ .map-canvas svg { width: 100%; height: auto; max-height: 76vh; display: block; margin: 0 auto; } .map-canvas:empty { display: none; } .map-grid line { stroke: var(--line); stroke-width: 1; } .map-edge-labels { pointer-events: none; } .map-edge-labels text { fill: #bac3d4; font: 10px Consolas, monospace; paint-order: stroke; stroke: #0b0e12; stroke-width: 4px; stroke-linejoin: round; } .map-edge-y { fill: #aab4c6; } .map-move { fill: none; stroke-width: 2; } .map-move-outgoing { stroke: var(--blue); } .map-move-advisor { stroke: #9d8ae0; stroke-width: 2.4; } .map-move-returning { stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 5 4; } .map-move-hostile { stroke: var(--red); stroke-width: 2.4; } .map-move-npc { stroke: var(--amber); stroke-width: 1.6; stroke-dasharray: 6 5; } .map-move-spy { stroke: #6f9fc4; stroke-width: 1.4; stroke-dasharray: 2 4; } .map-move-account-attack { stroke: var(--red); stroke-width: 2.6; } .map-move-alliance-attack { stroke: #d69146; stroke-width: 1.9; stroke-dasharray: 8 4; } .map-move-support, .map-move-alliance-support { stroke: var(--green); stroke-width: 1.9; stroke-dasharray: 3 3; } .map-move-other { stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 5 4; } /* Przebyty odcinek trasy: pelna kreska na wierzchu kreski calej trasy. Dlugosc odcinka ustawia panel wprost w stylu elementu (pathLength="1"). */ .map-move-walked { stroke-width: 3; opacity: .95; } .map-move-army { color: var(--muted); } .map-move-army-outgoing { color: var(--blue); } .map-move-army-advisor { color: #9d8ae0; } .map-move-army-hostile { color: var(--red); } .map-move-army-npc { color: var(--amber); } .map-move-army-spy { color: #6f9fc4; } .map-move-army-account-attack { color: var(--red); } .map-move-army-alliance-attack { color: #d69146; } .map-move-army-support, .map-move-army-alliance-support { color: var(--green); } .map-move-army-other { color: var(--muted); } .map-army-halo { fill: #0b0e12; stroke: currentColor; stroke-width: 1.2; opacity: .9; } .map-army-icon path { fill: currentColor; } .map-army-label { fill: currentColor; font: 10px Consolas, monospace; text-anchor: middle; opacity: 0; } .map-move-roomy .map-army-label, .map-move-group:hover .map-army-label { opacity: .9; } .map-arrow path { fill: var(--muted); } .map-arrow-outgoing path { fill: var(--blue); } .map-arrow-advisor path { fill: #9d8ae0; } .map-arrow-hostile path { fill: var(--red); } .map-arrow-npc path { fill: var(--amber); } .map-arrow-spy path { fill: #6f9fc4; } .map-arrow-account-attack path { fill: var(--red); } .map-arrow-alliance-attack path { fill: #d69146; } .map-arrow-support path, .map-arrow-alliance-support path { fill: var(--green); } .map-arrow-other path { fill: var(--muted); } .map-move-endpoints-account-attack { color: var(--red); } .map-move-endpoints-alliance-attack { color: #d69146; } .map-move-endpoints-support, .map-move-endpoints-alliance-support { color: var(--green); } .map-move-endpoints-npc { color: var(--amber); } .map-move-endpoints-spy { color: #6f9fc4; } .map-move-endpoints-returning { color: var(--muted); } .map-move-endpoints-other { color: var(--muted); } .map-move-endpoint { fill: #0b0e12; stroke: currentColor; stroke-width: 1.5; } .map-move-point-name, .map-move-point-coords { paint-order: stroke; stroke: #0b0e12; stroke-width: 4px; stroke-linejoin: round; } .map-move-point-name { fill: #d6dae0; font: 600 11px "Segoe UI", system-ui, sans-serif; } .map-move-point-coords { fill: var(--muted); font: 10px Consolas, monospace; } .map-target { fill: var(--amber); } .map-target-cooldown { fill: #5b5240; } .map-target-taken { fill: var(--green); } .map-castle { fill: var(--blue); } .map-castle.hostile { fill: var(--red); } .map-castle-ring { fill: none; stroke: var(--red); stroke-width: 1.4; opacity: .55; } .map-castle-ring.faint { stroke-width: 1; opacity: .28; } .map-castle-name { fill: #d6dae0; font: 600 13px "Segoe UI", system-ui, sans-serif; } .map-castle-name.hostile { fill: #eca8a2; } .map-castle-coords { fill: var(--dim); font: 11px Consolas, monospace; } .map-note { fill: var(--dim); font: 11px Consolas, monospace; } .console-panel { overflow: hidden; } .console-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .console-filter { display: inline-flex; } .console-filter input { width: 220px; height: var(--control-h-sm); padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 5px; background: #12151a; color: var(--text); font: 11px/1.4 Consolas, "Liberation Mono", monospace; } .console-count { color: var(--dim); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; } .terminal { height: 770px; overflow: auto; background: #0a0c0f; scrollbar-color: #3c424c #0a0c0f; } .terminal pre { margin: 0; padding: 15px 17px; color: #b7bec8; font: 11px/1.6 Consolas, "Liberation Mono", monospace; white-space: pre-wrap; overflow-wrap: anywhere; } .chat-panel { overflow: hidden; } .chat-log { display: flex; flex-direction: column; gap: 8px; height: 770px; padding: 14px 17px; overflow: auto; background: #0a0c0f; scrollbar-color: #3c424c #0a0c0f; } .chat-log:empty { padding: 0; } .chat-message { max-width: min(76%, 860px); padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); } .chat-message.own { align-self: flex-end; border-color: #33447f; background: #1a2033; } .chat-message header { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 3px; } .chat-message header strong { color: var(--text); font-size: 11px; } .chat-message.own header strong { color: #9db0ef; } .chat-message header time { color: var(--dim); font-size: 10px; font-variant-numeric: tabular-nums; } .chat-message p { margin: 0; color: #c6ccd6; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .script-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 11px 15px; margin-bottom: 14px; border: 1px solid var(--line); background: var(--panel); } .script-identity { display: flex; align-items: center; gap: 10px; } .script-identity div { display: flex; flex-direction: column; } .script-identity strong { font-size: 13px; } .script-identity small { margin-top: 3px; color: var(--dim); font-size: 10px; } .editor-layout { display: grid; grid-template-columns: minmax(540px, 1fr) 310px; gap: 14px; } .editor-panel { min-width: 0; } .settings-section { padding: 18px; border-bottom: 1px solid var(--line); } .settings-section:last-of-type { border-bottom: 0; } .settings-section h3 { margin-bottom: 13px; color: #c8cdd5; } .field-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: 12px; } .generic-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } .conditional-field { display: contents; } .conditional-field[hidden] { display: none; } .generic-switch { min-height: var(--control-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--line); color: #bdc2ca; background: #12151a; font-size: 11px; cursor: pointer; } .generic-switch input { position: absolute; opacity: 0; pointer-events: none; } .generic-switch i { position: relative; width: 30px; height: 16px; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 9px; background: #252a31; } .generic-switch i::after { content: ""; position: absolute; width: 10px; height: 10px; left: 2px; top: 2px; border-radius: 50%; background: #89919c; transition: 120ms; } .generic-switch input:checked + i { border-color: #356e58; background: #1b3c30; } .generic-switch input:checked + i::after { left: 16px; background: var(--green); } .generic-switch:has(input:disabled) { color: var(--dim); cursor: not-allowed; } /* Przełącznik nie ma etykiety nad ramką. W siatce, w której sąsiaduje z opisanym polem, dostaje odstęp wysokości etykiety — kafelek i input z tego samego wiersza zaczynają się na jednej linii. */ /* Wyrownanie przelacznika do pola z etykieta. Pola formularza modulow siedza w opakowaniu `.conditional-field` z `display: contents`, wiec regula musi siegac przez nie — wariant z samym `>` nie trafial w nic i przelaczniki staly wyzej niz sasiednie inputy. */ .generic-field-grid:has(> .conditional-field > .field) > .conditional-field > .generic-switch-field:not(.field-wide), .generic-field-grid:has(> .field) > .generic-switch-field:not(.field-wide), .baron-castle-grid:has(> .field) > .generic-switch-field { padding-top: var(--field-label-h); } /* Pole nadrzedne sekcji zajmuje caly wiersz: jego podpowiedz opisuje cala grupe, wiec nie ma sensu sciskac jej do jednej kolumny obok pol, ktore sama wlacza. */ /* Selektor musi byc potomkiem, nie dzieckiem: pole siedzi w opakowaniu `.conditional-field`, ktore ma `display: contents`, wiec elementem siatki jest wnuk, a nie dziecko. */ .generic-field-grid .field-wide { grid-column: 1 / -1; } .generic-field-grid .generic-switch-field.field-wide > .generic-switch { max-width: 420px; } .generic-field-grid .generic-switch-field.field-wide > small { max-width: 760px; } .generic-switch-field > small { display: block; margin-top: 6px; color: var(--dim); font-size: 10px; line-height: 1.4; } .field { display: flex; flex-direction: column; gap: 6px; color: #bdc2ca; font-size: 11px; } .field input, .field select, .rule-row input, .rule-row select { width: 100%; height: var(--control-h); padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--text); background: #101318; outline: none; } .field input:focus, .field select:focus, .rule-row input:focus, .rule-row select:focus { border-color: #5a6fbd; } .field select:disabled { color: var(--dim); cursor: not-allowed; background: #0e1115; } .field small { color: var(--dim); font-size: 10px; line-height: 1.4; } /* Liczba nie potrzebuje calej kolumny; szerokie pole na cztery cyfry wygladalo jak niedokonczony formularz. */ .field input[type="number"] { max-width: 190px; } .game-asset-icon { width: 30px; height: 30px; flex: 0 0 auto; display: inline-grid; place-items: center; overflow: hidden; border-radius: 2px; background: radial-gradient(circle, #242a32 0, #15191e 72%); } .game-asset-icon img { width: 100%; height: 100%; display: block; object-fit: contain; } .game-asset-missing, .game-asset-load-failed { background: #15191e; } .game-asset-kingdom { width: 26px; height: 26px; background: transparent; } .game-asset-tiny { width: 19px; height: 19px; background: transparent; } .game-asset-event { width: 24px; height: 24px; background: transparent; } .game-asset-module { width: 30px; height: 30px; background: transparent; } .game-asset-nav { width: 29px; height: 29px; background: transparent; } .game-asset-object { width: 32px; height: 32px; background: transparent; } .game-asset-target { width: 30px; height: 30px; background: transparent; } .game-asset-resource { width: 23px; height: 23px; background: transparent; } .game-asset-movement { width: 28px; height: 28px; background: transparent; } .game-asset-notification { width: 30px; height: 30px; background: transparent; } .game-asset-pill { width: 18px; height: 18px; background: transparent; } .game-asset-label { width: 19px; height: 19px; background: transparent; } .game-object-icon { position: relative; width: 34px; height: 34px; flex: 0 0 34px; display: inline-grid; place-items: center; } .game-object-icon .game-asset-object-badge { position: absolute; right: -2px; bottom: -1px; width: 14px; height: 14px; z-index: 1; background: rgba(16,19,24,.86); box-shadow: 0 0 0 1px rgba(16,19,24,.9); } .game-object-icon-small { width: 27px; height: 27px; flex-basis: 27px; } .game-object-icon-small .game-asset-object { width: 25px; height: 25px; } .game-object-icon-small .game-asset-object-badge { width: 11px; height: 11px; } .data-cell-with-icon { display: inline-flex; align-items: center; gap: 7px; } .field-label-with-icon, .detail-label-with-icon { display: inline-flex; align-items: center; gap: 6px; } .field-label-with-icon > span:last-child, .detail-label-with-icon > span:last-child { min-width: 0; } .unit-summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; } .unit-summary-item { display: inline-flex; align-items: center; gap: 3px; } .visual-select { position: relative; min-width: 0; width: 100%; display: block; } .visual-select-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; opacity: 0; pointer-events: none; } .visual-select-button { min-width: 0; width: 100%; min-height: var(--control-h); display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 2px 8px 2px 3px; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--text); background: #101318; cursor: pointer; text-align: left; } .visual-select-button:hover:not(:disabled), .visual-select-button:focus-visible { border-color: #5a6fbd; outline: none; } .visual-select-button:disabled { color: var(--dim); cursor: not-allowed; background: #0e1115; } .visual-select-button > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; } .visual-select-button > i { color: var(--dim); font-style: normal; } .choice-field { min-width: 0; grid-column: 1 / -1; margin: 0; padding: 0; border: 0; } .choice-field legend { padding: 0 0 7px; color: #bdc2ca; font-size: 11px; } .choice-field > small { display: block; margin-top: 7px; color: var(--dim); font-size: 10px; line-height: 1.4; } .choice-list { max-height: 220px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow-y: auto; padding: 7px; border: 1px solid var(--line); background: #101318; scrollbar-color: #3c424c #101318; } .choice-option { min-width: 0; display: flex; align-items: flex-start; gap: 8px; padding: 8px; border: 1px solid transparent; color: #b8bec7; background: #14181d; font-size: 10px; line-height: 1.4; cursor: pointer; } .choice-option:hover { border-color: var(--line-strong); color: var(--text); } .choice-option input { width: auto; height: auto; margin: 1px 0 0; accent-color: var(--blue); } .choice-option span { min-width: 0; overflow-wrap: anywhere; } .choice-empty { grid-column: 1 / -1; margin: 0; padding: 9px; color: var(--dim); font-size: 10px; text-align: center; } .assignment-field { min-width: 0; grid-column: 1 / -1; } .assignment-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: #bdc2ca; font-size: 11px; } .assignment-head, .assignment-row { min-width: 560px; display: grid; gap: 7px; align-items: center; } .rule-columns-1 { grid-template-columns: minmax(120px, 1fr) 34px; } .rule-columns-2 { grid-template-columns: repeat(2, minmax(120px, 1fr)) 34px; } .rule-columns-3 { grid-template-columns: repeat(3, minmax(120px, 1fr)) 34px; } .rule-columns-4 { grid-template-columns: repeat(4, minmax(120px, 1fr)) 34px; } .rule-columns-5 { grid-template-columns: repeat(5, minmax(120px, 1fr)) 34px; } .rule-columns-6 { grid-template-columns: repeat(6, minmax(120px, 1fr)) 34px; } .rule-columns-7 { grid-template-columns: repeat(7, minmax(120px, 1fr)) 34px; } .rule-columns-8 { grid-template-columns: repeat(8, minmax(120px, 1fr)) 34px; } .assignment-head { padding: 0 7px 6px; color: var(--dim); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; } .assignment-body { overflow-x: auto; scrollbar-color: #3c424c transparent; } .assignment-row { margin-bottom: 7px; padding: 7px; border: 1px solid var(--line); background: #12151a; } .assignment-row input, .assignment-row select { min-width: 0; width: 100%; height: var(--control-h-sm); padding: 0 8px; border: 1px solid var(--line-strong); color: var(--text); background: #101318; } .assignment-row input:focus, .assignment-row select:focus { border-color: #5a6fbd; outline: none; } .assignment-empty { margin: 0; padding: 18px; border: 1px dashed var(--line-strong); color: var(--dim); font-size: 10px; text-align: center; } .baron-castle-field { min-width: 0; grid-column: 1 / -1; } .baron-castle-field > small { display: block; margin-top: 9px; color: var(--dim); font-size: 10px; line-height: 1.45; } .baron-castle-tabs { display: flex; align-items: stretch; gap: 5px; overflow-x: auto; padding: 0 0 8px; scrollbar-color: #3c424c transparent; } .baron-castle-tab { min-width: 135px; min-height: var(--control-h-sm); display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--line); border-bottom-color: var(--line-strong); color: var(--dim); background: #101318; cursor: pointer; text-align: left; } .baron-castle-tab:hover { color: var(--text); border-color: #46516b; } .baron-castle-tab.active { color: #d7deef; border-color: #5269bd; background: #172036; } .baron-castle-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; } .baron-castle-panel { display: grid; gap: 12px; padding: 13px; border: 1px solid var(--line-strong); background: #111419; } .baron-castle-panel[hidden], .baron-mode-panel[hidden] { display: none; } .baron-castle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .protected-player-field, .evacuation-castle-field { min-width: 0; grid-column: 1 / -1; margin: 0; padding: 0; border: 0; } .protected-player-field > small, .evacuation-castle-field > small { display: block; margin-top: 8px; color: var(--dim); font-size: 10px; line-height: 1.45; } .protected-player-field .choice-empty { margin-top: 7px; } .evacuation-table-head, .evacuation-castle-row { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(180px, 1fr) minmax(360px, 1.5fr); align-items: center; gap: 10px; } .evacuation-table-head { padding: 0 11px 7px; color: var(--dim); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; } .evacuation-castle-row { padding: 9px 11px; border: 1px solid var(--line); border-bottom: 0; background: #12161b; } .evacuation-castle-row:last-of-type { border-bottom: 1px solid var(--line); } .evacuation-kingdom, .evacuation-castle { min-width: 0; display: flex; align-items: center; gap: 8px; } .evacuation-kingdom span, .evacuation-castle strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; } .evacuation-castle { align-items: center; flex-direction: row; gap: 7px; } .evacuation-castle > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .evacuation-castle small { color: var(--dim); font-size: 9px; } .evacuation-mode { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } .evacuation-mode label { min-width: 0; cursor: pointer; } .evacuation-mode input { position: absolute; opacity: 0; pointer-events: none; } .evacuation-mode span { min-height: var(--control-h-sm); display: grid; place-items: center; padding: 5px 7px; border: 1px solid var(--line-strong); color: var(--muted); background: #101318; font-size: 9px; text-align: center; } .evacuation-mode label:hover span { color: var(--text); border-color: #4b5875; } .evacuation-mode input:checked + span { color: #dbe3ff; border-color: #5269bd; background: #1a2340; } .baron-remove-castle { justify-self: end; } .attack-builder { min-width: 0; grid-column: 1 / -1; display: grid; gap: 9px; } .attack-builder-heading { display: grid; grid-template-columns: minmax(180px, 1fr) 170px; gap: 9px; } .attack-builder-heading label { display: grid; gap: 5px; color: #bdc2ca; font-size: 10px; } .attack-builder-heading input, .attack-slot-row input, .attack-slot-row select { min-width: 0; width: 100%; height: var(--control-h-sm); padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--text); background: #101318; outline: none; } .attack-wave { border: 1px solid var(--line); background: #101318; } .attack-wave > summary { padding: 10px 12px; color: #c5cad1; background: #13171c; cursor: pointer; font-size: 10px; font-weight: 600; } .attack-lanes { display: grid; grid-template-columns: repeat(3, minmax(230px, 1fr)); gap: 8px; padding: 8px; overflow-x: auto; } .attack-lane { min-width: 230px; padding: 9px; border: 1px solid var(--line); background: #12161b; } .attack-lane h5 { margin: 0 0 8px; color: #cbd0d7; font-size: 10px; } .attack-slot-label { display: block; margin: 8px 0 4px; color: var(--dim); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; } .attack-slot-row { display: grid; grid-template-columns: minmax(150px, 1fr) 70px; gap: 5px; margin-bottom: 5px; } .attack-slot-row .visual-select-button, .assignment-row .visual-select-button { min-height: var(--control-h-sm); } .attack-courtyard > div { max-width: 520px; padding: 9px; } .attack-builder > small { color: var(--dim); font-size: 10px; line-height: 1.45; } .section-title-row, .rules-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; } .rules-heading { align-items: center; padding-top: 19px; margin-top: 18px; border-top: 1px solid var(--line); } .rules-heading code { color: #b9c5e9; font: 10px Consolas, monospace; } .rule-table-head, .rule-row { display: grid; grid-template-columns: 160px minmax(180px, 1fr) 34px; gap: 8px; align-items: center; } .rule-table-head { padding: 13px 0 7px; color: var(--dim); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; } .rule-row { margin-bottom: 7px; } .empty-rules { margin: 9px 0 0; padding: 14px; border: 1px dashed var(--line-strong); color: var(--dim); font-size: 11px; text-align: center; } .empty-rules[hidden] { display: none; } .editor-actions { display: flex; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--line); } .save-state { color: var(--dim); font-size: 10px; } .save-state.dirty { color: var(--amber); } .editor-side { display: flex; flex-direction: column; gap: 14px; } .learning-content { display: grid; gap: 9px; padding: 14px 16px 16px; } .learning-content strong { font-size: 11px; color: var(--text); } .learning-content p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; } .camp-content { display: grid; gap: 6px; padding: 14px 16px 16px; } .camp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .camp-row span { color: var(--muted); font-size: 10px; } .camp-row strong { color: var(--text); font-size: 11px; text-align: right; } .camp-empty { margin: 0; padding: 14px 16px 16px; color: var(--dim); font-size: 10px; line-height: 1.55; } .notes-panel { padding: 16px; } .notes-panel > p { margin: 8px 0 0; color: var(--dim); font-size: 10px; line-height: 1.5; } .notes-panel ol { padding-left: 18px; margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.9; } .button { min-height: var(--control-h); padding: 0 13px; border: 1px solid transparent; border-radius: 2px; cursor: pointer; font-size: 11px; font-weight: 600; } .button:disabled { cursor: not-allowed; opacity: .4; } .button-small { min-height: var(--control-h-sm); padding: 0 9px; font-size: 10px; } .button-full { width: 100%; } /* Górny pasek widoku ma jedną wysokość: chip stanu, przyciski i dzwonek. */ .topbar-actions .button-small { min-height: var(--control-h); padding: 0 12px; } .button-primary { color: white; background: var(--blue); } .button-primary:hover:not(:disabled) { background: var(--blue-hover); } .button-muted { border-color: var(--line-strong); color: #c2c7cf; background: #1a1e24; } .button-muted:hover:not(:disabled) { background: #22262d; } .button-danger { border-color: #603632; color: #df8a84; background: #211514; } .button-danger:hover:not(:disabled) { background: #2a1918; } .icon-button { width: 34px; height: var(--control-h); border: 1px solid var(--line-strong); border-radius: 2px; color: var(--muted); background: #15181d; cursor: pointer; font-size: 18px; } .icon-button:hover { color: var(--text); } .login-dialog { width: min(500px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--text); background: var(--panel); box-shadow: 0 24px 70px rgba(0,0,0,.58); } .login-dialog::backdrop { background: rgba(4,6,9,.76); backdrop-filter: blur(3px); } .game-item-picker { width: min(680px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 28px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--text); background: var(--panel); box-shadow: 0 24px 70px rgba(0,0,0,.58); } .game-item-picker::backdrop { background: rgba(4,6,9,.78); backdrop-filter: blur(3px); } .game-item-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line); } .game-item-picker-head strong { font-size: 13px; } .game-item-picker-search { padding: 11px 13px; border-bottom: 1px solid var(--line); } .game-item-picker-search input { width: 100%; height: var(--control-h); padding: 0 10px; border: 1px solid var(--line-strong); color: var(--text); background: #101318; outline: none; } .game-item-picker-search input:focus { border-color: #5a6fbd; } .game-item-picker-list { max-height: min(620px, calc(100vh - 150px)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow-y: auto; padding: 10px; scrollbar-color: #3c424c #101318; } .game-item-picker-option { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--line); color: #bdc3cc; background: #12161b; cursor: pointer; text-align: left; } .game-item-picker-option .game-asset-icon { width: 42px; height: 42px; } .game-item-picker-option > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; font-size: 10px; line-height: 1.4; } .game-item-picker-option > i { color: var(--green); font-size: 9px; font-style: normal; } .game-item-picker-option:hover, .game-item-picker-option.selected { border-color: #5368a8; color: var(--text); background: #171d29; } .login-form { margin: 0; } .login-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 17px 18px; border-bottom: 1px solid var(--line); } .login-heading h2 { margin-bottom: 5px; font-size: 14px; } .login-heading p { margin: 0; color: var(--dim); font-size: 10px; line-height: 1.45; } .dialog-close { width: var(--control-h-sm); height: var(--control-h-sm); flex: 0 0 auto; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 22px; line-height: 1; } .dialog-close:hover { color: var(--text); } .login-fields { display: grid; gap: 13px; padding: 18px; } .login-fields [hidden] { display: none !important; } .login-account-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; } .login-account-row select { min-width: 0; } .login-account-row .button { min-height: var(--control-h); } .login-save-line { width: fit-content; } .login-privacy { margin: 0; color: var(--dim); font-size: 9px; line-height: 1.55; } .login-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 13px 18px; border-top: 1px solid var(--line); background: #12151a; } .switch-line { display: inline-flex; align-items: center; gap: 9px; color: #bdc2ca; font-size: 11px; cursor: pointer; } .switch-line input { position: absolute; opacity: 0; pointer-events: none; } .switch-line i { position: relative; width: 30px; height: 16px; display: inline-block; border: 1px solid var(--line-strong); border-radius: 9px; background: #252a31; } .switch-line i::after { content: ""; position: absolute; width: 10px; height: 10px; left: 2px; top: 2px; border-radius: 50%; background: #89919c; transition: 120ms; } .switch-line input:checked + i { border-color: #356e58; background: #1b3c30; } .switch-line input:checked + i::after { left: 16px; background: var(--green); } .switch-line input:disabled + i { opacity: .45; cursor: not-allowed; } .switch-line.compact { align-self: flex-start; } .toast { position: fixed; right: 20px; bottom: 20px; max-width: 420px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--text); background: #1b1f25; box-shadow: 0 10px 28px rgba(0,0,0,.32); opacity: 0; transform: translateY(8px); pointer-events: none; transition: 140ms; font-size: 11px; } .toast.show { opacity: 1; transform: translateY(0); } .toast.error { border-color: #74413d; color: #eca8a2; background: #241716; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .shutdown-screen { min-height: 100vh; display: grid; place-content: center; text-align: center; } .shutdown-screen p { color: var(--muted); } /* ——— Widoki na całą wysokość okna ——— Mapa, czat sojuszu i konsola nie przewijają strony. Kolumna treści dostaje wysokość okna, a pasek przewijania zostaje tylko tam, gdzie jest treść do przewinięcia: w logu, w rozmowie i w długiej liście modułów. Klasę ustawia setView() w app.js, bo pozostałe widoki nadal rosną w dół. */ body.view-fits-window { height: 100vh; display: flex; flex-direction: column; overflow: hidden; } body.view-fits-window .app { min-height: 0; flex: 1; } body.view-fits-window .sidebar { min-height: 0; overflow-y: auto; scrollbar-width: thin; } body.view-fits-window .content { min-height: 0; display: flex; flex-direction: column; overflow: hidden; } body.view-fits-window .topbar { flex: 0 0 auto; } body.view-fits-window .view.active { min-height: 0; flex: 1; display: flex; flex-direction: column; } body.view-fits-window .view.active > .summary-grid { flex: 0 0 auto; } body.view-fits-window .view.active > .panel { min-height: 0; flex: 1; display: flex; flex-direction: column; } body.view-fits-window .panel-heading, body.view-fits-window .map-kingdoms { flex: 0 0 auto; } body.view-fits-window .terminal, body.view-fits-window .chat-log { height: auto; min-height: 0; flex: 1; } body.view-fits-window .map-canvas { min-height: 0; flex: 1; } /* Pusty kontener normalnie znika, ale rysunek bierze z niego swoje wymiary — w tym układzie musi trzymać miejsce jeszcze przed pierwszym rysowaniem. */ body.view-fits-window .map-canvas:empty { display: block; } body.view-fits-window .map-canvas svg { height: 100%; max-height: none; } /* ——— Szerokie ekrany ——— Widoki nie mają już limitu 1320 px, więc sekcje dostają całą szerokość kolumny treści. Formularze rozkładają pola na kolejną kolumnę zamiast rozciągać pojedynczy input na pół panelu. */ @media (min-width: 1560px) { .content { padding: 25px 36px 38px; } .generic-field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .choice-list { max-height: 260px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .baron-castle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .editor-layout { grid-template-columns: minmax(0, 1fr) 360px; } } @media (min-width: 1960px) { .generic-field-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .choice-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 980px) { .app { grid-template-columns: 205px minmax(0, 1fr); } .content { padding: 22px 18px 32px; } .editor-layout { grid-template-columns: 1fr; } .account-grid { grid-template-columns: 1fr; } #attacksView .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .editor-side { display: grid; grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .app { display: block; } .sidebar { position: static; width: 100%; height: auto; } .content { padding: 18px 10px 28px; } .topbar { flex-direction: column; } .topbar-actions { width: 100%; flex-wrap: wrap; } .console-panel .panel-heading { align-items: stretch; flex-direction: column; } .console-toolbar { justify-content: space-between; } .console-filter, .console-filter input { width: 100%; } .summary-grid { grid-template-columns: 1fr 1fr; } #targetsView .summary-grid { grid-template-columns: 1fr 1fr; } #attacksView .summary-grid { grid-template-columns: 1fr; } .summary-item:nth-child(2) { border-right: 0; } .summary-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .field-grid, .generic-field-grid, .editor-side, .choice-list, .baron-castle-grid { grid-template-columns: 1fr; } .evacuation-table-head { display: none; } .evacuation-castle-row { grid-template-columns: 1fr; } .target-note, .target-filters { align-items: stretch; flex-direction: column; } .section-title-row, .rules-heading { flex-direction: column; } .rule-table-head { display: none; } .rule-row { grid-template-columns: 1fr 34px; } .rule-row label:first-child { grid-column: 1; } .rule-row label:nth-child(2) { grid-column: 1; } .rule-row .remove-rule { grid-column: 2; grid-row: 1 / 3; height: 100%; } } /* ---------------------------------------------- panel administratora */ /* Zakladka kont uzytkownikow jest widoczna wylacznie dla administratora. */ .impersonation-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; background: #8a5a00; color: #fff; font-size: 13px; } .user-list { display: grid; gap: 12px; margin: 16px 0; } .account-bar-users { min-height: var(--control-h-sm); flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 3px; color: #aeb4bd; background: #15181d; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; } .account-bar-users:hover { color: var(--text); border-color: var(--line-strong); } .account-bar-users.active { color: #fff; border-color: #526bc7; background: #25345f; } .account-bar-users span:not(:empty) { min-width: 16px; padding: 1px 5px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 9px; text-align: center; } /* Caly naglowek karty jest przelacznikiem szczegolow. */ .user-card-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 12px; } .user-card-head:hover { background: rgba(255, 255, 255, .04); } .user-card-head.open { border-radius: 12px 12px 0 0; } .user-chevron { flex: 0 0 auto; font-size: 18px; line-height: 1; opacity: .55; transition: transform .15s ease; } .user-card-head.open .user-chevron { transform: rotate(90deg); } .user-card-title { flex: 1; min-width: 0; } .user-card-title strong { display: block; } .user-card-title small { opacity: .6; } .user-badges { display: flex; gap: 8px; flex-wrap: wrap; } .user-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .user-badge.ok { color: #4ade80; border-color: rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .1); } .user-badge.off { color: #9ca3af; border-color: rgba(156, 163, 175, .4); background: rgba(156, 163, 175, .1); } .user-badge.warn { color: #fbbf24; border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .1); } .user-card-body { border-top: 1px solid var(--border, #30363d); } .user-section-title { margin: 22px 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .55; } .user-section-title:first-child { margin-top: 0; } /* Dane konta jako kafelki — para etykieta/wartosc czyta sie lepiej niz dwie kolumny tekstu rozjezdzajace sie na szerokim ekranie. */ .user-facts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 4px; } .user-fact { padding: 10px 14px; border-radius: 10px; background: var(--input, #0d1117); border: 1px solid var(--border, #30363d); } .user-fact-label { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; opacity: .55; margin-bottom: 4px; } .user-fact-value { font-size: 15px; font-variant-numeric: tabular-nums; } .user-fact-value.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 14px; } .login-history { border: 1px solid var(--border, #30363d); border-radius: 10px; overflow: hidden; max-height: 240px; overflow-y: auto; } .login-history.empty { padding: 12px 14px; font-size: 13px; opacity: .6; } .login-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 14px; font-size: 13px; border-bottom: 1px solid var(--border, #30363d); } .login-row:last-child { border-bottom: 0; } .login-row code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; opacity: .8; } .user-accounts { margin: 0; padding: 0; list-style: none; } .user-accounts li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border: 1px solid var(--border, #30363d); border-radius: 10px; margin-bottom: 8px; } .game-account-line { flex: 1; min-width: 220px; } .game-account-line strong { display: block; } .game-account-meta { font-size: 12px; opacity: .6; } .user-history { max-height: 220px; overflow: auto; font-size: 12px; line-height: 1.6; padding: 10px 14px; border-radius: 10px; background: var(--input, #0d1117); border: 1px solid var(--border, #30363d); margin: 0; } .user-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .user-create-form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; } .user-create-actions { display: flex; gap: 8px; } .credentials-box { padding: 14px 16px; border-radius: 8px; background: var(--input, #0d1117); border: 1px solid var(--border, #30363d); font-size: 14px; line-height: 1.8; user-select: all; } .reveal-button { margin-left: 8px; } .revealed-password { margin-left: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(248, 81, 73, .14); border: 1px solid rgba(248, 81, 73, .35); user-select: all; } /* ------------------------------------------------- ekran logowania */ /* Styl karty logowania. Musi byc tutaj, a nie w