:root {
  --bg: #15130f;
  --panel: #2a241b;
  --panel2: #3a3226;
  --edge: #6b5a3e;
  --gold: #d8b45a;
  --text: #efe6d2;
  --muted: #a89a7e;
  --red: #c8483c;
  --green: #5fae4e;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: "Georgia", "Times New Roman", serif; overflow: hidden; user-select: none; }
.hidden { display: none !important; }
.screen { position: absolute; inset: 0; }

/* ---------- menu ---------- */
#menu { display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 20px 0; box-sizing: border-box;
  background: radial-gradient(ellipse at center, #3a3020 0%, #15130f 70%); }
.menu-box { background: linear-gradient(#2f281e, #221d16); border: 2px solid var(--edge);
  border-radius: 6px; padding: 24px 32px; width: min(760px, 94vw); box-shadow: 0 10px 40px #000a; margin: 20px auto; }
/* margin: auto centruje w pionie, a przy niskim oknie nie ucina góry menu (align-items: center wypychało ją poza obszar przewijania) */
#menu > .menu-box { margin: auto; }
.menu-box.small { width: 300px; display: flex; flex-direction: column; gap: 8px; }
.menu-box h1 { margin: 0; text-align: center; letter-spacing: 12px; color: var(--gold); font-size: 44px;
  text-shadow: 0 2px 0 #000; }
.menu-box h2 { margin-top: 0; color: var(--gold); text-align: center; }
.menu-box h3 { color: var(--gold); margin: 18px 0 8px; border-bottom: 1px solid var(--edge); padding-bottom: 4px; }
.sub { text-align: center; color: var(--muted); margin: 4px 0 18px; font-style: italic; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
label { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); gap: 4px; }
select, input[type=text] { background: #1a1611; color: var(--text); border: 1px solid var(--edge);
  padding: 6px; border-radius: 3px; font-family: inherit; font-size: 14px; }
.prow { display: grid; grid-template-columns: 26px 1.4fr 1.3fr 1fr 1.1fr 30px; gap: 8px; align-items: center; margin: 6px 0; }
.prow .swatch { width: 22px; height: 22px; border-radius: 3px; border: 1px solid #000; }
.prow .pname { font-size: 15px; }
.row-btns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.btn { background: linear-gradient(#5a4a30, #3d3220); color: var(--text); border: 1px solid var(--edge);
  padding: 8px 16px; border-radius: 3px; cursor: pointer; font-family: inherit; font-size: 14px; }
.btn:hover { background: linear-gradient(#6d5a3a, #4a3c27); border-color: var(--gold); }
.btn.primary { background: linear-gradient(#8a6a2a, #5c4518); font-size: 17px; padding: 10px 30px; border-color: var(--gold); }
.btn.danger { background: linear-gradient(#7a2e26, #4f1d18); }
.btn.small { padding: 3px 10px; font-size: 12px; }
.btn.icon { padding: 2px 8px; }
.ai-info { margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.help { margin-top: 14px; font-size: 13px; color: var(--muted); }
.help summary { cursor: pointer; color: var(--gold); }
.help li { margin: 3px 0; }

/* ---------- game ---------- */
#game { display: flex; flex-direction: column; }
#topbar { height: 34px; background: linear-gradient(#3a3226, #2a241b); border-bottom: 2px solid var(--edge);
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-size: 14px; flex: none; z-index: 2; }
#resbar { display: flex; gap: 18px; }
.res { display: flex; align-items: center; gap: 6px; }
.res canvas { width: 18px; height: 18px; }
.res .v { min-width: 38px; font-weight: bold; }
.res.pop .v.full { color: var(--red); }
#topright { display: flex; gap: 16px; align-items: center; color: var(--muted); }
#ageLabel { color: var(--gold); }
#view { flex: 1; display: block; width: 100%; min-height: 0; cursor: default; background: #000; }
#bottom { height: 190px; flex: none; display: flex; background: linear-gradient(#3a3226, #221d16);
  border-top: 2px solid var(--edge); }
#minimapWrap { width: 190px; height: 190px; padding: 6px; flex: none; border-right: 2px solid var(--edge); }
#minimap { width: 178px; height: 178px; display: block; background: #000; border: 1px solid #000; cursor: pointer; image-rendering: pixelated; }
#selPanel { flex: 1; padding: 8px 12px; overflow: hidden; display: flex; gap: 12px; min-width: 0; }
#cmdPanel { width: 330px; flex: none; padding: 8px; border-left: 2px solid var(--edge);
  display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 54px; gap: 5px; align-content: start; }
#cmdPanel.many { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.cmd { position: relative; background: linear-gradient(#4b3e2a, #2f271b); border: 1px solid var(--edge);
  border-radius: 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 10px; color: var(--text); padding: 2px; text-align: center; line-height: 1.05; overflow: hidden; }
.cmd:hover { border-color: var(--gold); background: linear-gradient(#5e4d33, #3a3021); }
.cmd.disabled { opacity: .38; cursor: not-allowed; }
.cmd.cant { border-color: #7a3a30; }
.cmd .hk { position: absolute; top: 1px; right: 3px; font-size: 9px; color: var(--gold); font-weight: bold; }
.cmd canvas { width: 30px; height: 30px; }
.cmd .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* długie nazwy w dwóch liniach zamiast "Rozbudo..." (QA B25); ui.js dodaje .two, gdy napis się nie mieści */
.cmd.two canvas { width: 24px !important; height: 24px !important; }   /* hiCanvas ustawia rozmiar w stylu elementu */
.cmd.two .lbl { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.05; font-size: 9px;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; padding-bottom: 1px; }

.portrait { width: 84px; height: 84px; background: #1a1611; border: 1px solid var(--edge); flex: none; }
.selinfo { display: flex; flex-direction: column; gap: 4px; min-width: 170px; font-size: 13px; }
.selinfo .name { font-size: 17px; color: var(--gold); }
.hpbar { height: 8px; background: #400; border: 1px solid #000; width: 160px; }
.hpbar > div { height: 100%; background: var(--green); }
.stats { color: var(--muted); font-size: 12px; line-height: 1.5; }
.queue { display: flex; gap: 4px; flex-wrap: wrap; align-content: flex-start; }
.qitem { width: 40px; height: 40px; border: 1px solid var(--edge); background: #1a1611; position: relative; cursor: pointer; }
.qitem canvas { width: 38px; height: 38px; }
.qitem .prog { position: absolute; bottom: 0; left: 0; height: 4px; background: var(--gold); }
.multisel { display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start; overflow-y: auto; max-height: 172px; }
.mini { width: 38px; height: 44px; border: 1px solid var(--edge); background: #1a1611; position: relative; cursor: pointer; }
.mini canvas { width: 36px; height: 36px; }
.mini .mhp { position: absolute; bottom: 1px; left: 2px; right: 2px; height: 4px; background: #400; }
.mini .mhp > div { height: 100%; background: var(--green); }
.mini .cnt { position: absolute; top: 0; right: 2px; font-size: 10px; color: var(--gold); }

#alerts { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 3; }
.alert { background: #000b; padding: 4px 14px; border-radius: 3px; font-size: 14px; border-left: 3px solid var(--gold); }
.alert.bad { border-left-color: var(--red); color: #ffd0c8; }
.alert.good { border-left-color: var(--green); }

#tooltip { position: absolute; background: #0e0c09f0; border: 1px solid var(--edge); padding: 8px 10px;
  font-size: 12px; max-width: 280px; pointer-events: none; z-index: 10; line-height: 1.45; }
#tooltip b { color: var(--gold); font-size: 13px; }
#tooltip .cost { margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
#tooltip .no { color: var(--red); }

.overlay { position: absolute; inset: 0; background: #000a; display: flex; align-items: center; justify-content: center; z-index: 20; }
#endStats table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
#endStats th, #endStats td { padding: 4px 6px; border-bottom: 1px solid #4a3e2c; text-align: right; }
#endStats th:first-child, #endStats td:first-child { text-align: left; }
#endStats .note { color: var(--muted); font-size: 13px; margin: 10px 0; line-height: 1.5; }

.menu-box.wide { width: min(900px, 96vw); }
.menu-head { display: flex; align-items: center; justify-content: center; position: relative; }
.fs-btn { position: absolute; right: 0; top: 6px; }
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--edge); margin-bottom: 14px; flex-wrap: wrap; }
.tab { background: #241e16; color: var(--muted); border: 1px solid var(--edge); border-bottom: none; padding: 7px 14px;
  font-family: inherit; font-size: 14px; cursor: pointer; border-radius: 4px 4px 0 0; }
.tab.active { background: var(--panel2); color: var(--gold); }
.tabpage { min-height: 260px; }
.prow { grid-template-columns: 26px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,0.9fr) minmax(0,1fr) 30px; }
.prow select, .prow input[type=text] { width: 100%; box-sizing: border-box; min-width: 0; }
.phead { color: var(--muted); font-size: 12px; }
.chk { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: 14px; }
.start-row { margin-top: 18px; justify-content: space-between; align-items: center; }
.helplist li { margin: 6px 0; font-size: 14px; line-height: 1.5; }
.helplist b { color: var(--gold); }
.ai-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ai-levels .lv { background: #1d1812; border: 1px solid var(--edge); border-radius: 4px; padding: 10px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.ai-levels .lv b { color: var(--gold); font-size: 14px; display: block; margin-bottom: 4px; }
#peaceLabel { color: #9fd08a; }

/* ---------- pasek grup kontrolnych ---------- */
#groupBar { position: absolute; left: 198px; bottom: 198px; display: flex; gap: 3px; z-index: 3; pointer-events: none; }
.gslot { pointer-events: auto; position: relative; width: 40px; height: 36px; background: linear-gradient(#3e3426e8, #241e16e8);
  border: 1px solid var(--edge); border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gslot:hover { border-color: var(--gold); }
.gslot.empty { width: 20px; opacity: .45; background: #1d1812b0; }
.gslot.empty:hover { opacity: .9; }
.gslot.on { border-color: #9fff70; box-shadow: 0 0 0 1px #9fff7066 inset; }
.gslot canvas { width: 26px; height: 26px; }
.gslot .gnum { position: absolute; top: 0; left: 3px; font-size: 10px; font-weight: bold; color: var(--gold); text-shadow: 0 1px 0 #000; }
.gslot.empty .gnum { left: 0; right: 0; top: 10px; text-align: center; color: var(--muted); }
.gslot .gcnt { position: absolute; bottom: 0; right: 3px; font-size: 10px; color: var(--text); text-shadow: 0 1px 0 #000, 0 0 2px #000; }

/* ---------- ekran skrótów ---------- */
.keys-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.keys-info { font-size: 12px; color: var(--muted); }
.keys-msg { min-height: 18px; font-size: 12px; color: #9fd08a; margin-bottom: 4px; }
.keys-list { max-height: 52vh; overflow-y: auto; padding-right: 6px; }
.keys-cat { color: var(--gold); font-size: 14px; margin: 12px 0 4px; border-bottom: 1px solid var(--edge); padding-bottom: 2px; }
.keys-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 4px; font-size: 13px; border-radius: 3px; }
.keys-row:hover { background: #ffffff0a; }
.keys-row.fixed .kname { color: var(--muted); }
.kbtn { min-width: 92px; text-align: center; background: #1a1611; color: var(--text); border: 1px solid var(--edge); border-radius: 3px;
  padding: 3px 8px; font-family: inherit; font-size: 13px; cursor: pointer; flex: none; }
.kbtn:hover { border-color: var(--gold); }
.kbtn.changed { color: var(--gold); }
.kbtn.wait { border-color: #9fff70; color: #9fff70; }
.kbtn.fixed { cursor: default; color: var(--muted); border-style: dashed; }
.kmod { min-width: 92px; flex: none; }
#keysOverlay .menu-box { max-height: 92vh; }

.credit { margin-top: 14px; font-size: 12px; color: var(--muted); text-align: center; }
.credit a { color: var(--gold); }
.map-desc { font-size: 12px; line-height: 1.35; color: var(--muted); font-style: italic; min-height: 3.2em; }

/* ---------- dźwięk ---------- */
input[type=range] { accent-color: var(--gold); width: 100%; margin: 4px 0; cursor: pointer; }
.snd-grid { margin-bottom: 4px; }
.snd-pause { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); padding: 8px 0; margin: 4px 0; }
.snd-pause label { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.snd-pause input[type=range] { width: 150px; }
.snd-credits { max-height: 190px; overflow-y: auto; font-size: 12px; color: var(--muted); line-height: 1.45; user-select: text; }
.snd-credits h4 { margin: 8px 0 4px; color: var(--text); font-size: 13px; }
.snd-credits ul { margin: 0; padding-left: 18px; }
.snd-credits li { margin: 3px 0; }
.snd-credits a { color: var(--gold); }
.snd-note { margin: 6px 0 0; font-style: italic; }

/* ---------- nacje: kolumna w menu graczy, opis nacji, etykieta w grze ---------- */
.prow { grid-template-columns: 26px minmax(0, 1.2fr) minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 0.95fr) 30px; }
.prow select, .prow input { width: 100%; min-width: 0; }
.nation-info { display: flex; gap: 14px; margin-top: 10px; padding: 10px 12px; background: #1d1812; border: 1px solid var(--edge); border-radius: 4px;
  font-size: 12.5px; color: var(--muted); line-height: 1.45; min-height: 112px; }
.nation-info canvas { flex: none; width: 64px; height: 76px; }
.nation-info b { color: var(--gold); }
.nation-info .nname { font-size: 15px; color: var(--gold); }
.nation-info ul { margin: 3px 0 0; padding-left: 16px; }
.nation-info .nunits { margin-top: 3px; font-size: 11.5px; }
#ageLabel .nat { color: var(--muted); font-size: 12px; margin-left: 6px; }

/* ---------- podgląd mapy (js/mappreview.js) ---------- */
.map-setup { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.map-opts { grid-template-columns: 1fr 1fr; align-content: start; }
.map-opts > label:first-child { grid-column: 1 / -1; }
.map-opts > .chk { grid-column: 1 / -1; }
.map-prev { display: flex; flex-direction: column; gap: 6px; background: #15120d; border: 1px solid var(--edge); border-radius: 4px; padding: 8px; }
.map-prev canvas { width: 100%; height: 190px; display: block; }
.map-prev-info { font-size: 12px; line-height: 1.45; color: var(--muted); min-height: 3em; }
.map-prev-info b { color: var(--text); font-weight: normal; }
.map-prev-info .ok { color: #9fd17a; }
.map-prev-info .warn { color: #e0b060; }
.map-prev .row-btns { margin-top: 0; }
.lb-setrow { display: grid; grid-template-columns: 1fr 280px; gap: 14px; align-items: start; }
.lb-prev canvas { height: 160px; }
@media (max-width: 760px) { .map-setup, .lb-setrow { grid-template-columns: 1fr; } }