.bt-card {
  padding: var(--cs-gap-3, 12px);
  margin-bottom: var(--cs-gap-3, 12px);
  border: 1px solid var(--cs-line);
  background: linear-gradient(155deg, var(--pv-color-battle-cardGradA05), var(--pv-color-battle-cardGradA012));
  
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}


.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: var(--cs-6); font-weight: 700;
  
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.bt-side i { font-size: var(--cs-2); opacity: .62; font-style: normal; letter-spacing: .04em; }
.bt-side.mine { text-align: left; color: var(--cs-accent); }
.bt-side.foe { text-align: right; color: var(--danger); }

.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;
}


.bt-axis {
  position: relative; height: 8px;
  background: var(--pv-color-battle-axisWhiteA06);
  border: 1px solid var(--cs-line);
  overflow: hidden;
}
.bt-axis::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--pv-color-battle-axisWhiteA35); 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); box-shadow: 0 0 10px var(--cs-accent-glow); }
.bt-axis i.foe { right: 50%; background: var(--danger); }

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


.bt-prog { margin-top: var(--cs-gap-2, 8px); }
.bt-prog i { transition: width .28s linear; }


.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); box-shadow: 0 0 12px var(--cs-accent-glow);
}


.fl-yard-disc { color: var(--pv-color-signal-ok); font-weight: 600; }
.fl-yard-disc + .fl-yard-disc { margin-left: 6px; }


.bt-buy { display: flex; flex-direction: column; gap: 3px; align-items: stretch; }
.bt-buy .bt-step { min-width: 26px; }

.bt-buy .bt-build {
  width: 100%; padding: 5px 8px; letter-spacing: 0.04em;
  border-color: var(--cs-accent);
  color: var(--cs-accent);
  background: color-mix(in srgb, var(--cs-accent) 12%, transparent);
}
.bt-buy .bt-build.off { border-color: var(--cs-line); color: inherit; background: none; }


.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);
  border: 1px solid var(--cs-line); border-radius: 4px;
  color: inherit; font: inherit; font-size: var(--cs-2, 11.5px);
}

.bt-tpl-new input::placeholder { color: var(--cs-line); }
.bt-tpl-new .fl-btn { white-space: nowrap; }



.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); opacity: 0.92;
  font-style: italic; letter-spacing: 0.01em;
}



.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);
  border: 1px solid var(--cs-line-hot); border-radius: 6px;
  box-shadow: 0 8px 28px var(--pv-color-overlay-blackA550);
  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); }
.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); }

.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; }

.bt-hint-hub { margin: var(--cs-gap-2, 7px) 0 0 !important; opacity: 1 !important; color: var(--pv-color-signal-info); font-weight: 600; }



.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); }

.bt-odw b { min-width: 4.5ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--cs-accent); }


.bt-sil { display: block; overflow: visible; }
.bt-sil polygon { stroke: none; }
.bt-sil .s-kadlub { fill: var(--pv-color-res-metal); }
.bt-sil .s-plyta  { fill: var(--pv-color-surface-panel); }
.bt-sil .s-kil    { fill: var(--pv-color-text-low); }

.bt-sil .s-emit   { fill: var(--pv-color-emit-weapon); }
.bt-sil.r-logi  .s-emit { fill: var(--pv-color-emit-yard); }
.bt-sil.r-heavy .s-emit { fill: var(--pv-color-emit-core); }

.bt-sil.bt-sil-lewo { transform: scaleX(-1); }


.bt-plansza-wrap { display: flex; flex-direction: column; gap: 10px; }

.bt-dowodz { width: 100%; margin-bottom: 8px; font-weight: 600; }


.bt-ini-pas { display: flex; gap: 4px; overflow-x: auto; padding: 4px 0; }
.bt-ini { display: flex; align-items: center; gap: 3px; flex: 0 0 auto;
  padding: 3px 6px; border-radius: 6px; border: 1px solid var(--pv-color-surface-line);
  background: var(--pv-color-surface-fill); font-size: var(--cs-2); }
.bt-ini svg { width: 20px; height: 20px; }
.bt-ini.teraz { border-color: var(--pv-color-signal-accent); background: var(--pv-color-surface-fillSoft); }
.bt-ini.zuzyty { opacity: .38; }
.bt-ini.wrog b { color: var(--pv-color-signal-danger); }
.bt-ini.moj b { color: var(--pv-color-signal-ok); }


.bt-plansza { position: relative; display: grid; grid-template-columns: repeat(var(--bt-kol), 1fr);
  gap: 2px; background: var(--pv-color-surface-line); padding: 2px; border-radius: 8px; }


.bt-wiazka { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.bt-beam {
  stroke: var(--pv-color-signal-accent); stroke-width: .7; stroke-linecap: round;
  stroke-dasharray: 160; stroke-dashoffset: 160; opacity: 0;
  animation: bt-beam-draw 1.4s linear forwards;
  animation-delay: calc(-1 * var(--age));
}
@keyframes bt-beam-draw {
  0% { stroke-dashoffset: 160; opacity: 0; }
  8% { opacity: 1; }
  18% { stroke-dashoffset: 0; opacity: 1; }
  70% { opacity: .5; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.bt-impact {
  fill: var(--pv-color-signal-accent); r: 0; opacity: 0;
  animation: bt-impact-burst 1.4s ease-out forwards;
  animation-delay: calc(-1 * var(--age));
}
.bt-impact-kill { fill: var(--pv-color-signal-danger); }
@keyframes bt-impact-burst {
  0% { r: 0; opacity: 0; }
  18% { r: 1; opacity: 0; }
  26% { r: 5; opacity: .9; }
  55% { r: 2.5; opacity: .6; }
  100% { r: 2.5; opacity: 0; }
}
.bt-kr { position: relative; aspect-ratio: 1 / 1; background: var(--pv-color-bg-void);
  display: flex; align-items: center; justify-content: center; border-radius: 3px; }
.bt-kr svg { width: 86%; height: 86%; }
.bt-kr-przesz { background: var(--pv-color-surface-fill); }
.bt-przesz-i { color: var(--pv-color-text-low); font-size: var(--cs-2); font-style: normal; }

.bt-kr-ruch { background: var(--pv-color-surface-fillSoft); box-shadow: inset 0 0 0 1px var(--pv-color-signal-world); cursor: pointer; }
.bt-kr-moj { box-shadow: inset 0 0 0 1px var(--pv-color-signal-ok); }
.bt-kr-wrog { box-shadow: inset 0 0 0 1px var(--pv-color-signal-danger); cursor: pointer; }
.bt-kr-akt { box-shadow: inset 0 0 0 2px var(--pv-color-signal-accent); }
.bt-kr-cel { box-shadow: inset 0 0 0 2px var(--pv-color-signal-danger); }
.bt-kr-n { position: absolute; right: 1px; bottom: 0; font-size: 9px; line-height: 1;
  color: var(--pv-color-text-high); text-shadow: 0 0 3px var(--pv-color-bg-void); }
.bt-kr-pm { position: absolute; left: 1px; top: 0; font-size: 8px; line-height: 1;
  text-decoration: none; color: var(--pv-color-signal-accent); }
.bt-kr-zn { position: absolute; left: 1px; bottom: 0; font-size: 8px; font-style: normal;
  color: var(--pv-color-signal-info); }
.bt-zn-czuwa { color: var(--pv-color-signal-violet); }


.bt-stan { font-size: var(--cs-2); color: var(--pv-color-text-high); }
.bt-cel { display: flex; align-items: center; gap: 10px; padding: 8px;
  border: 1px solid var(--pv-color-surface-line); border-radius: 8px;
  background: var(--pv-color-surface-fill); }
.bt-cel-l { display: flex; align-items: center; gap: 4px; }
.bt-cel-l svg { width: 34px; height: 34px; }
.bt-cel-p { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bt-cel-pm { font-size: var(--cs-4); color: var(--pv-color-signal-accent); }
.bt-tagi { display: flex; gap: 4px; flex-wrap: wrap; }
.bt-tag { font-size: var(--cs-1); padding: 1px 5px; border-radius: 4px; }
.bt-tag-ok { color: var(--pv-color-signal-ok); background: var(--pv-color-surface-fillSoft); }
.bt-tag-zle { color: var(--pv-color-signal-danger); background: var(--pv-color-surface-fillSoft); }
.bt-ognij { padding: 10px 16px; border-radius: 8px; border: 0; font-weight: 700;
  background: var(--pv-color-signal-danger); color: var(--pv-color-bg-void); }

.bt-rozkazy { display: flex; gap: 6px; flex-wrap: wrap; }
.bt-rozkazy .fl-btn { flex: 1 1 auto; min-width: 92px; }


.bt-ars-tytul { font-size: var(--cs-2); letter-spacing: .08em; text-transform: uppercase;
  color: var(--pv-color-text-low); }
.bt-arsenal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.bt-moc { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 3px; border-radius: 8px; border: 1px solid var(--pv-color-surface-line);
  background: var(--pv-color-surface-fill); color: var(--pv-color-text-high); }
.bt-moc-i { font-size: var(--cs-4); font-style: normal; line-height: 1; }
.bt-moc-n { font-size: var(--cs-1); }
.bt-moc-k { font-size: var(--cs-1); color: var(--pv-color-text-low); }
.bt-moc-nie { opacity: .4; }
.bt-moc-wyb { border-color: var(--pv-color-signal-accent); background: var(--pv-color-surface-fillSoft); }

.bt-szk-psi { color: var(--pv-color-signal-violet); }
.bt-szk-ew { color: var(--pv-color-signal-info); }
.bt-szk-nan { color: var(--pv-color-signal-ok); }
.bt-szk-gra { color: var(--pv-color-signal-world); }

.bt-szk-gen { color: var(--pv-color-signal-accent); }

.bt-koniec { padding: 8px; border-radius: 8px; text-align: center;
  background: var(--pv-color-surface-fill); color: var(--pv-color-text-high); }


.fl-vet { display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: var(--pv-color-surface-fillSoft); border-bottom: 1px solid var(--pv-color-surface-line); }
.fl-vet-r { font-size: 12px; font-weight: 600; color: var(--pv-color-signal-accent);
  white-space: nowrap; }
.fl-vet-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--pv-color-surface-fill);
  overflow: hidden; }
.fl-vet-bar i { display: block; height: 100%; background: var(--pv-color-signal-accent); }
.fl-vet-acc { font-size: 11px; color: var(--pv-color-signal-ok); white-space: nowrap; }


.fl-glyph-syl .bt-sil { width: 26px; height: 26px; }


.fl-gen-card { border: 1px solid var(--pv-color-surface-line); border-radius: 8px;
  margin-bottom: 6px; overflow: hidden; cursor: pointer; }
.fl-gen-badge { border-bottom: none; }
.fl-gen-badge .fl-vet-r { color: var(--pv-color-signal-violet); }
.fl-gen-badge .fl-vet-bar i { background: var(--pv-color-signal-violet); }
.fl-gen-badge .fl-vet-bar.over i { background: var(--pv-color-signal-danger); }
.fl-gen-card > .fl-sub { display: block; padding: 0 12px 8px; }
.fl-gen-detail { padding: 8px 12px 12px; border-top: 1px solid var(--pv-color-surface-line);
  display: flex; flex-direction: column; gap: 8px; }
.fl-gen-warn i { color: var(--pv-color-signal-danger); }


.fl-dsg-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--cs-gap-2, 7px); }
.fl-dsg-slot { display: flex; gap: 4px; }
.fl-dsg-slot select { min-width: 0; max-width: 100%; font-size: 12px; }
.fl-dsg-pwr.over i { background: var(--pv-color-signal-danger); }
.fl-dsg-warn { color: var(--pv-color-signal-danger); }

.fl-dsg-card { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 10px;
  overflow: hidden; margin-bottom: 8px; background: var(--pv-color-surface-line); }
.fl-dsg-card img { width: 100%; height: 100%; object-fit: cover; display: block; }



.bt-hint-hub-off { color: var(--txt-dim) !important; font-weight: 500 !important; }


.fl5-head { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px;
  border-bottom: 1px solid var(--pv-color-surface-line); }
.fl5-head-stats { display: flex; gap: 16px; }
.fl5-head-stat { display: flex; flex-direction: column; }
.fl5-head-stat b { font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fl5-head-stat span { font-size: 11px; color: var(--txt-dim); }
.fl5-head-alert { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border-radius: 8px; background: var(--pv-color-battle-dangerBg); }
.fl5-head-alert span { font-size: 12px; color: var(--pv-color-signal-danger); font-weight: 600; }
.fl5-head-alert .fl-btn { min-height: 44px; flex: 0 0 auto; }
.fl5-shortcut-hint { font-size: 10px; color: var(--txt-dim); text-align: center;
  padding: 6px 0 2px; opacity: .7; }

.fl5-cta { display: block; width: 100%; min-height: 44px; margin-top: 8px; }