/* ============================================================
   feat/bitwa: panel boczny po lewej zamiast dolnego (portret i statystyki zaznaczenia, karta rozkazów,
   pasek szybkich przycisków, grupy, minimapa). Ładowany ostatni - nadpisuje układ z style.css, ux.css i ui-extra.css.
   Szerokość --side-w w px przed skalą interfejsu (panel ma zoom: var(--ui-scale) jak dawny dolny panel).
   Górna część (zaznaczenie + karta) przewija się, gdy brakuje wysokości; pasek szybki, grupy i minimapa stoją na dole.
   ============================================================ */
:root { --side-w: 248px; }

#game { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
#game > #topbar { grid-column: 1 / -1; grid-row: 1; }
#game > #view { grid-column: 2; grid-row: 2; width: 100%; height: 100%; min-width: 0; }

/* panel: wysokość = okno minus górny pasek (oba w tej samej skali) */
#bottom.side { grid-column: 1; grid-row: 2; width: var(--side-w); height: auto; align-self: stretch; min-height: 0;
  display: flex; flex-direction: column; background: linear-gradient(90deg, #2c251b, #231d16); border-top: none;
  border-right: 2px solid var(--edge); box-shadow: 2px 0 10px #0008; overflow: hidden; position: relative; z-index: 4; }
#sideScroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
#sideScroll::-webkit-scrollbar { width: 7px; }
#sideScroll::-webkit-scrollbar-track { background: #00000040; }
#sideScroll::-webkit-scrollbar-thumb { background: #8a7040; border-radius: 4px; }
#sideFixed { flex: none; border-top: 2px solid var(--edge); background: linear-gradient(#2a241b, #1d1812); padding: 5px 5px 6px; display: flex; flex-direction: column; gap: 4px; }

/* ---------- zaznaczenie ---------- */
#bottom.side #selPanel { flex: none; padding: 7px 7px 6px; display: flex; flex-wrap: wrap; gap: 6px 8px; align-content: flex-start; overflow: visible; min-height: 74px; border-bottom: 1px solid #4a3e2c; position: relative; }
#bottom.side #selPanel > .stats:only-child { padding: 4px !important; }
#bottom.side .portrait { width: 58px; height: 58px; }
#bottom.side .portrait + canvas, #bottom.side canvas.portrait { width: 58px !important; height: 58px !important; }
#bottom.side .selinfo { min-width: 0; flex: 1 1 140px; font-size: 12px; gap: 2px; }
#bottom.side .selinfo .name { font-size: 15px; line-height: 1.15; }
#bottom.side .hpbar { width: 100%; max-width: 160px; }
#bottom.side .stats { font-size: 11.5px; line-height: 1.4; }
#bottom.side .queue { flex-basis: 100%; gap: 3px; }
#bottom.side .qitem { width: 36px; height: 36px; }
#bottom.side .qitem canvas { width: 34px !important; height: 34px !important; }
#bottom.side .tzinfo { flex-basis: 100%; max-width: none; min-width: 0; }
#bottom.side .tz-xp { width: 100%; max-width: 180px; }
#bottom.side .tz-inv { grid-template-columns: repeat(6, 30px); }
/* wiele zaznaczonych: siatka ikon z mini-paskami zdrowia (i many), poziom w rogu */
#bottom.side .multisel { max-height: 150px; width: 100%; gap: 2px; }
#bottom.side .mini { width: 37px; height: 42px; }
#bottom.side .mini canvas { width: 35px !important; height: 35px !important; }
#bottom.side .mini .mhp { height: 3px; bottom: 2px; }
#bottom.side .mini .mmp { position: absolute; bottom: 0; left: 2px; right: 2px; height: 2px; background: #10142a; }
#bottom.side .mini .mmp > div { height: 100%; background: #7a8cff; }
#bottom.side .mini .mlv { position: absolute; top: 0; left: 2px; font-size: 9.5px; font-weight: bold; color: #f0d060; text-shadow: 0 1px 0 #000, 0 0 2px #000; }
#bottom.side .msum { flex-basis: 100%; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
#bottom.side .msum b { color: var(--gold); font-weight: normal; font-size: 13px; }

/* ---------- karta rozkazów: 4 kolumny ---------- */
#bottom.side #cmdPanel, #bottom.side #cmdPanel.many { width: auto; flex: none; border-left: none; padding: 6px 6px 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 50px; gap: 4px; }
#bottom.side #cmdPanel:empty { display: none; }
#bottom.side .cmd { font-size: 9.5px; }

/* ---------- pasek szybki (2 rzędy po 7: 9 akcji + 4 widoki) i grupy (9 w rzędzie) ---------- */
#bottom.side #uxQuick { position: static; zoom: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
#bottom.side #uxQuick .uxq { width: auto; height: 27px; }
#bottom.side #uxQuick .uxq svg { width: 16px; height: 16px; }
#bottom.side #uxQuick .uxq-sep { display: none; }
#bottom.side #uxQuick .uxq.on { border-color: var(--gold); color: #fff3c8; box-shadow: 0 0 6px #ffd84a55 inset; }
#bottom.side #groupBar { position: static; zoom: 1; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2px; pointer-events: auto; }
#bottom.side .gslot, #bottom.side .gslot.empty { width: auto; height: 28px; }
#bottom.side .gslot canvas { width: 20px !important; height: 20px !important; }
#bottom.side .gslot .gnum { left: 2px; font-size: 9px; }
#bottom.side .gslot.empty .gnum { top: 7px; left: 0; }
#bottom.side .gslot .gcnt { right: 2px; font-size: 9px; }

/* ---------- minimapa: na całą szerokość, romb mapy 2:1 ---------- */
#bottom.side #minimapWrap { width: auto; height: auto; padding: 0; border-right: none; }
#bottom.side #minimap { width: 100%; height: 196px; }   /* [bitwa2] widok z góry: kwadrat mapy */

/* ---------- elementy nad mapą przesunięte w prawo od panelu ---------- */
/* zoom elementu mnoży też left/top - dla elementów ze skalą wystarczy szerokość panelu w jego jednostkach */
#hintBox { left: calc(var(--side-w) + 10px); }
#tzHeroes { left: calc(var(--side-w) * var(--ui-scale) + 8px); }
#scObj { left: calc(var(--side-w) * var(--ui-scale) + 8px); }
.net-chat { left: calc(var(--side-w) * var(--ui-scale) + 10px); bottom: 12px; }
#scDlg { left: calc(50% + var(--side-w) * var(--ui-scale) / 2); bottom: 24px; }
#replayBar { left: calc(50% + var(--side-w) / 2); }
.net-specbar, .net-banner { left: calc(50% + var(--side-w) * var(--ui-scale) / 2); }
#uxBldMenu { max-height: 70vh; }

/* bardzo niskie okno (np. 1280x720 przy skali 120%): mniejsza minimapa */
@media (max-height: 760px) { #bottom.side #minimap { height: 150px; } #bottom.side #cmdPanel { grid-auto-rows: 46px; } }

/* górny pasek przy dużej skali na wąskim oknie (np. 1280 px i 120%): prawa część w jednej linii, surowce się ściskają
   (zamiast łamania "Gród / Królestwa Zachodu" i wypadania przycisku Menu poza ekran) */
#topbar { gap: 10px; }
#resbar { flex: 1 1 auto; min-width: 0; overflow: hidden; gap: clamp(8px, 1.1vw, 18px); white-space: nowrap; }
#resbar .res .v { min-width: 30px; }
#topright { flex: none; white-space: nowrap; }
@media (max-width: 1599px) { #ageLabel .nat { display: none; } }

/* ---------- [bitwa2] sekcja Taktyka: szyk i postawa (js/bitwa2_ui.js) ---------- */
#tactPanel { flex: none; padding: 6px 7px 5px; border-bottom: 1px solid #4a3e2c; display: flex; flex-direction: column; gap: 4px; }
#tactPanel .tp-row { display: flex; align-items: center; gap: 6px; }
#tactPanel .tp-lbl { width: 52px; flex: none; font-size: 11px; color: var(--muted); }
#tactPanel .tp-btns { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
#tactPanel #tpStance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#tactPanel .tpb { height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #d8c89a;
  background: linear-gradient(#3e3426, #241e16); border: 1px solid var(--edge); border-radius: 3px; }
#tactPanel .tpb:hover { border-color: var(--gold); color: #fff3c8; }
#tactPanel .tpb.on { border-color: var(--gold); color: #fff3c8; background: linear-gradient(#6d5a3a, #4a3c27); box-shadow: 0 0 6px #ffd84a55 inset; }
#tactPanel .tpb.part { border-style: dashed; }
#tactPanel #tpStance .tpb[data-k="agg"].on { color: #ffb0a0; }
#tactPanel #tpStance .tpb[data-k="def"].on { color: #a8d0ff; }
#tactPanel #tpStance .tpb[data-k="hold"].on { color: #ffe08a; }
#tactPanel .tp-now { font-size: 11px; color: var(--muted); }
#tactPanel .tp-now b { color: var(--text); font-weight: normal; }
#tactPanel .tp-now .st-agg { color: #ffb0a0; } #tactPanel .tp-now .st-def { color: #a8d0ff; } #tactPanel .tp-now .st-hold { color: #ffe08a; }

/* QA4: za mało wysokości na całą kartę - niższe przyciski i zaznaczenie (klasa z js/ux_ui.js) */
#bottom.side.tight #cmdPanel { grid-auto-rows: 38px; gap: 3px; padding-top: 4px; }
#bottom.side.tight .cmd canvas { width: 22px !important; height: 22px !important; }
#bottom.side.tight #selPanel { min-height: 0; padding: 4px 6px; }
#bottom.side.tight .multisel { max-height: 90px; }

/* ---------- feat/qa4b (js/qa4b_ui.js) ---------- */
/* 3. wskaźnik "więcej niżej" w przewijanej części panelu */
#sideMore { position: sticky; bottom: 0; margin-top: auto; height: 22px; flex: none; display: none; align-items: flex-end; justify-content: center;
  padding-bottom: 3px; color: var(--gold); cursor: pointer; background: linear-gradient(#231d1600, #231d16f0 70%); }
#sideMore.on { display: flex; }
#sideMore:hover { color: #fff3c8; }
/* 5. zwijanie panelu: wąski pasek z przyciskiem */
#sideToggle { position: absolute; top: 4px; right: 3px; z-index: 6; min-width: 0; padding: 2px 4px; line-height: 0; opacity: 0.75; }
#sideToggle:hover { opacity: 1; }
#bottom.side.collapsed { width: 22px; }
#bottom.side.collapsed > *:not(#sideToggle) { display: none !important; }
#bottom.side.collapsed #sideToggle { right: 2px; top: 6px; }
#bottom.side #selPanel { padding-right: 24px; }
/* 6. górny pasek: skrócony licznik bezczynnych */
#resbar.qa4-compact .res .v { min-width: 24px; }
/* 9. Szyk żółwia */
.qa4-buffbox { flex-basis: 100%; }
.qa4-buff { display: flex; gap: 5px; align-items: flex-start; font-size: 11.5px; color: #e8d590; line-height: 1.35; }
.qa4-buff svg { flex: none; margin-top: 1px; }
/* 10. osobna skala lewego panelu (UISET.sideScale -> --side-scale); elementy nad mapą liczą przesunięcie z tą skalą */
#bottom.side { zoom: calc(var(--ui-scale) * var(--side-scale, 1)); }
#tzHeroes, #scObj { left: calc(var(--side-w) * var(--ui-scale) * var(--side-scale, 1) + 8px); }
.net-chat { left: calc(var(--side-w) * var(--ui-scale) * var(--side-scale, 1) + 10px); }
#scDlg, .net-specbar, .net-banner { left: calc(50% + var(--side-w) * var(--ui-scale) * var(--side-scale, 1) / 2); }
/* 7. legenda podglądu mapy */
.map-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 11px; color: var(--muted); margin: 4px 0 2px; }
.map-legend span { display: inline-flex; align-items: center; gap: 4px; }
.map-legend i { width: 9px; height: 9px; border: 1px solid #000; display: inline-block; }
.map-legend i.start { border-radius: 50%; border: 1.5px solid #fff; background: #888; }