/* PULVISOL — PANEL BITWY (zamówienie A2, 04.08) — warstwa L5, plik sesji walk flot.
   ═══════════════════════════════════════════════════════════════════════════
   Właściciel: „dalej nie widzę fajnego panelu wojny, widzę tylko kilka linijek,
   jakby to była gra papierowa; to ma być ŻYWA GRA, a nie makieta".

   ⚠ RÓŻNICA MIĘDZY LISTĄ A PANELEM NIE POLEGA NA OZDOBACH, tylko na tym, że
   LICZBY SIĘ RUSZAJĄ. Dlatego wszystko tutaj ma `transition` na szerokości —
   oś przewagi przechyla się płynnie, pasek tury pełznie, a nie przeskakuje.
   Panel odświeża się co 250 ms w trakcie bitwy (poza nią 900 ms jak reszta okna).

   ⚠ CHROM Z `css/console.css`, NIE WŁASNY: `--cs-accent` (akcent piętra),
   `--cs-line`, `--cs-gap-*`, `--danger`, liczby tabularne. Ten plik dokłada
   WYŁĄCZNIE układ bitwy; gdyby zaczął definiować własne kolory, panel byłby
   wyspą, a właściciel prosił o jedną konsolę, nie o zbiór stylów.
   ═══════════════════════════════════════════════════════════════════════════ */

.bt-card {
  padding: var(--cs-gap-3, 12px);
  margin-bottom: var(--cs-gap-3, 12px);
  border: 1px solid var(--cs-line, rgba(255, 255, 255, .12));
  background: linear-gradient(155deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  /* ścięty narożnik — ten sam przyrząd co `#fab-fleet` w console.css */
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}

/* ---------- dwie strony i licznik tur ---------- */
.bt-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--cs-gap-2, 8px);
  margin: var(--cs-gap-3, 12px) 0 var(--cs-gap-2, 8px);
}
.bt-side { display: flex; flex-direction: column; line-height: 1.1; }
.bt-side b {
  font-size: 1.6rem; font-weight: 700;
  /* R1 z console.css: liczby tabularne, żeby licznik nie skakał przy zmianie cyfry */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.bt-side i { font-size: .72rem; opacity: .62; font-style: normal; letter-spacing: .04em; }
.bt-side.mine { text-align: left; color: var(--cs-accent, #ffb454); }
.bt-side.foe { text-align: right; color: var(--danger, #f2555a); }

.bt-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bt-turn { font-size: .7rem; letter-spacing: .18em; opacity: .8; }
.bt-eta {
  font-size: .82rem; font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- oś przewagi: przechyla się na żywo ----------
   Środek = remis. Wypełnienie rośnie w stronę tego, kto góruje — dlatego
   `.mine` rośnie w prawo od środka, a `.foe` w lewo. Bez `transition`
   ta oś byłaby wykresem słupkowym, a ma być wskazówką przyrządu. */
.bt-axis {
  position: relative; height: 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--cs-line, rgba(255, 255, 255, .12));
  overflow: hidden;
}
.bt-axis::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: rgba(255, 255, 255, .35); z-index: 2;
}
.bt-axis i {
  position: absolute; top: 0; bottom: 0; display: block;
  transition: width .28s cubic-bezier(.22, .61, .36, 1);
}
.bt-axis i.mine { left: 50%; background: var(--cs-accent, #ffb454); box-shadow: 0 0 10px var(--cs-accent-glow, transparent); }
.bt-axis i.foe { right: 50%; background: var(--danger, #f2555a); }

.bt-legend {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 4px; font-size: .72rem; opacity: .8;
}
.bt-legend b {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ---------- pasek postępu tury ---------- */
.bt-prog { margin-top: var(--cs-gap-2, 8px); }
.bt-prog i { transition: width .28s linear; }

/* ---------- nagłówek: dziedziczy `.fl-head` z console.css ---------- */
.bt-head { margin-bottom: var(--cs-gap-2, 8px); }
.bt-head::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px;
  background: var(--cs-accent, #ffb454); box-shadow: 0 0 12px var(--cs-accent-glow, transparent);
}

/* ── STOCZNIA: licznik + przycisk BUDUJ (F1/F2) ─────────────────────────────
   Wylacznie NOWE klasy. `.fl-num`, `.fl-btn` naleza do styles.css (nie moj plik)
   i nie dotykam ani jednej ich reguly — dokladam sie obok, nie na wierzchu. */
.bt-buy { display: flex; flex-direction: column; gap: 3px; align-items: stretch; }
.bt-buy .bt-step { min-width: 26px; }
/* Przycisk ma byc WIDOCZNIE polaczony z polem nad nim: ta sama szerokosc, brak
   przerwy, akcent pietra jako wypelnienie — zeby nie ginal na tle gwiazd. */
.bt-buy .bt-build {
  width: 100%; padding: 5px 8px; letter-spacing: 0.04em;
  border-color: var(--cs-accent, #8ab4ff);
  color: var(--cs-accent, #8ab4ff);
  background: color-mix(in srgb, var(--cs-accent, #8ab4ff) 12%, transparent);
}
.bt-buy .bt-build.off { border-color: var(--cs-line, #2a3550); color: inherit; background: none; }

/* ── F3: zapis szablonu skladu ───────────────────────────────────────────── */
.bt-tpl-new { display: flex; gap: var(--cs-gap-1, 3px); align-items: stretch; margin: var(--cs-gap-2, 7px) 0; }
.bt-tpl-new input {
  flex: 1 1 auto; min-width: 0; padding: 5px 8px;
  background: var(--cs-glass, rgba(140,165,210,.07));
  border: 1px solid var(--cs-line, #2a3550); border-radius: 4px;
  color: inherit; font: inherit; font-size: var(--cs-2, 11.5px);
}
/* ⚠ `color: inherit` NIE JEST OZDOBA: `<input>` i `<button>` maja wlasny kolor
   z arkusza przegladarki (czarny) i NIE dziedzicza go po rodzicu. Dokladnie tak
   powstal czarny napis w kafelku HUD, ktory wlasciciel zglosil jako nieczytelny. */
.bt-tpl-new input::placeholder { color: var(--cs-line, #2a3550); }
.bt-tpl-new .fl-btn { white-space: nowrap; }


/* ── MELDUNEK Z MOSTKA ─────────────────────────────────────────────────────
   Stoi POD osia przewagi i NAD paskiem tury: zdanie ma tlumaczyc liczbe, ktora
   gracz wlasnie przeczytal, wiec musi byc pod nia, nie obok.
   ⚠ `min-height` na dwa wiersze: bez tego zmiana linii z jednowierszowej na
   dwuwierszowa PRZESUWA pasek tury w trakcie bitwy i cala karta drga. */
.bt-say {
  margin: var(--cs-gap-2, 7px) 0 var(--cs-gap-1, 3px);
  min-height: 2.6em; display: flex; align-items: center;
  font-size: var(--cs-2, 11.5px); line-height: 1.3;
  color: var(--cs-accent, #8ab4ff); opacity: 0.92;
  font-style: italic; letter-spacing: 0.01em;
}


/* ── DYMEK PROJEKTU OKRETU ─────────────────────────────────────────────────
   `position: fixed`, bo panel sie przewija, a dymek ma stac przy wierszu.
   `pointer-events: none` — dymek NIE MOZE przejmowac kursora, inaczej najechanie
   na niego samego wywoluje `mouseleave` na wierszu i dymek miga w kolko. */
.bt-hint {
  display: none; position: fixed; z-index: 90; max-width: min(320px, 92vw);
  pointer-events: none;
  padding: var(--cs-gap-3, 14px);
  background: var(--cs-glass-deep, rgba(9,14,24,.97));
  border: 1px solid var(--cs-line-hot, #3a4a70); border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  color: inherit; font-size: var(--cs-2, 11.5px); line-height: 1.45;
}
.bt-hint b { display: block; font-size: var(--cs-4, 15.5px); color: var(--cs-accent, #8ab4ff); }
.bt-hint i { display: block; margin: 2px 0 var(--cs-gap-2, 7px); opacity: .85; font-style: italic; }
.bt-hint-g { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--cs-gap-2, 7px); margin-bottom: var(--cs-gap-2, 7px); }
/* liczby tabularne — reguła R1: cyfry o roznej szerokosci rozjezdzaja kolumny */
.bt-hint-g span { display: flex; justify-content: space-between; opacity: .75; }
.bt-hint-g b { display: inline; font-size: inherit; color: inherit; font-variant-numeric: tabular-nums; }
.bt-hint ul { margin: 0; padding-left: 1.1em; }
.bt-hint li { margin: 1px 0; }
.bt-hint p { margin: var(--cs-gap-2, 7px) 0 0; opacity: .6; }


/* ── DISCESSUS: suwak progu odwrotu ───────────────────────────────────────── */
.bt-odw { display: flex; align-items: center; gap: var(--cs-gap-3, 14px); margin: var(--cs-gap-2, 7px) 0; }
.bt-odw input[type=range] { flex: 1 1 auto; min-width: 0; accent-color: var(--cs-accent, #8ab4ff); }
/* liczba tabularna i STALA SZEROKOSC: bez tego suwak drga w poziomie przy kazdym
   kroku, bo `5 %` i `90 %` maja rozna szerokosc. Regula R1. */
.bt-odw b { min-width: 4.5ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--cs-accent, #8ab4ff); }