/* ===== Брол Бакуганов: боковые панели, схватка, баннер (public/brawl.js) =====
   Цвета атрибутов - как в аниме: Пайрус красный, Аквос синий, Вентус зелёный, Сабтерра охра,
   Хаос светло-жёлтый, Даркус фиолетовый. У каждого две роли: --a (заливка, рамка, свечение)
   и --a-text (текст на тёмной панели, светлее, чтобы читался). Неизвестный атрибут - нейтральный. */
:root {
  --bz-pyrus: #d8433a;    --bz-pyrus-text: #ffc4bd;
  --bz-aquos: #2f86d6;    --bz-aquos-text: #b3dbff;
  --bz-ventus: #35a862;   --bz-ventus-text: #a8ecc0;
  --bz-subterra: #b0703a; --bz-subterra-text: #f2cba5;
  --bz-haos: #e9d266;     --bz-haos-text: #f3e49c;
  --bz-darkus: #8a55cf;   --bz-darkus-text: #dfcbfb;
  --bz-none: #6f7480;     --bz-none-text: #d2d6dd;
  --bz-back: #1a1920;     --bz-back-line: #3a3846;
  /* подписи мельче 14px: тема даёт --muted на грани 4.5:1 (epic 4.45), поэтому подмешиваем ink */
  --bz-dim: color-mix(in srgb, var(--muted) 45%, var(--ink));
}
[data-attr] { --a: var(--bz-none); --a-text: var(--bz-none-text); }
[data-attr="pyrus"] { --a: var(--bz-pyrus); --a-text: var(--bz-pyrus-text); }
[data-attr="aquos"] { --a: var(--bz-aquos); --a-text: var(--bz-aquos-text); }
[data-attr="ventus"] { --a: var(--bz-ventus); --a-text: var(--bz-ventus-text); }
[data-attr="subterra"] { --a: var(--bz-subterra); --a-text: var(--bz-subterra-text); }
[data-attr="haos"] { --a: var(--bz-haos); --a-text: var(--bz-haos-text); }
[data-attr="darkus"] { --a: var(--bz-darkus); --a-text: var(--bz-darkus-text); }

/* ── боковые панели (широкий экран: абсолютом в #main вдоль ленты, JS ставит top/height/left) ── */
.bz-panel {
  position: absolute; z-index: 6; display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.bz-panel.bz-me { border-left: 3px solid var(--accent); }
.bz-panel.bz-them { border-right: 3px solid #c0392b; }
.bz-head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.bz-owner { flex: 1; min-width: 0; font-weight: 700; font-size: var(--fz-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-them .bz-owner { color: #f4c9c3; }
.bz-score { font-size: var(--fz-xs); color: var(--bz-dim); white-space: nowrap; }
.bz-score b { font-size: var(--fz-base); color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 2px; }
.bz-fold {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); font-size: 13px; cursor: pointer;
  transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.bz-fold:hover { color: var(--ink); border-color: var(--muted); }
.bz-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bz-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-4); scrollbar-width: thin; }
.bz-empty { font-size: var(--fz-sm); color: var(--muted); }

/* свёрнута: узкий корешок с именем по вертикали */
.bz-panel.folded .bz-head { flex-direction: column; padding: var(--space-2) 0; border-bottom: 0; }
.bz-panel.folded .bz-owner, .bz-panel.folded .bz-score { display: none; }
.bz-vert { writing-mode: vertical-rl; text-orientation: mixed; margin: var(--space-2) auto; font-size: var(--fz-sm); font-weight: 700; color: var(--bz-dim); white-space: nowrap; }

/* ── секции и строки ── */
.bz-sec { display: flex; flex-direction: column; gap: var(--space-2); }
.bz-sec-h { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--fz-sm); font-weight: 700; color: var(--bz-dim); }
.bz-cnt { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.bz-nm { font-size: var(--fz-sm); font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-sub { font-size: var(--fz-xs); color: var(--bz-dim); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* бакуган: шар атрибута + имя + G-сила */
.bz-bak {
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: var(--space-2);
  padding: 6px var(--space-2); border-radius: 6px;
  background: color-mix(in srgb, var(--a) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--a) 28%, transparent);
}
.bz-bak .bz-sub { color: var(--a-text); -webkit-line-clamp: 1; }
.bz-bak .bz-sub.bz-eff { color: var(--bz-dim); -webkit-line-clamp: 2; white-space: normal; }
.bz-sphere {
  position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  /* объём шара, не декор фона */
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--a) 55%, #fff) 0 12%, var(--a) 45%, color-mix(in srgb, var(--a) 55%, #000) 100%);
  border: 2px solid color-mix(in srgb, var(--a) 70%, #000);
}
.bz-sphere::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(0, 0, 0, .35); }
.bz-sphere img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.bz-sphere.unk { background: var(--bz-back); border: 2px dashed var(--bz-back-line); }
.bz-sphere.unk::after { display: none; }
.bz-q { font-weight: 800; font-size: 16px; color: var(--muted); }
.bz-g { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 18px; font-weight: 700; color: var(--a-text); font-variant-numeric: tabular-nums; line-height: 1; }
.bz-gu { font-size: 10px; margin-left: 2px; color: var(--muted); }
/* активный (на поле / в схватке): свечение атрибута и дышащее кольцо - просьба Творца «как в аниме» */
.bz-bak.active { background: color-mix(in srgb, var(--a) 18%, transparent); border-color: var(--a); }
.bz-bak.active .bz-sphere { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--a), 0 0 16px 2px color-mix(in srgb, var(--a) 70%, transparent); }
.bz-bak.active .bz-sphere::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--a);
  animation: bz-breathe 1.8s ease-in-out infinite; z-index: 2; will-change: transform, opacity;
}
.bz-bak.out { opacity: .5; }
.bz-bak.out .bz-nm { text-decoration: line-through; text-decoration-color: var(--muted); }
@keyframes bz-breathe { 0%, 100% { opacity: .15; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.05); } }

/* карта: мини-карта 30x42 с кольцом-эмблемой, цвет атрибута */
.bz-crd { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: var(--space-2); }
.bz-card {
  position: relative; width: 30px; height: 42px; border-radius: 3px; overflow: hidden; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--a, var(--bz-none)) 78%, #000);
  border: 1px solid color-mix(in srgb, var(--a, var(--bz-none)) 60%, #fff);
}
.bz-card img { width: 100%; height: 100%; object-fit: cover; }
.bz-ring { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); }
.bz-card.back { background: var(--bz-back); border-color: var(--bz-back-line); }
.bz-card.back .bz-ring { border-color: var(--bz-back-line); width: 18px; height: 18px; box-shadow: inset 0 0 0 3px var(--bz-back), inset 0 0 0 5px var(--bz-back-line); }
.bz-crd.used { opacity: .55; }
.bz-crd.out { opacity: .45; }
.bz-crd.on .bz-card { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--a); }

/* рубашки неизвестного */
.bz-backs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.bz-back-bak .bz-sphere { width: 30px; height: 30px; }
.bz-backs-lbl { font-size: var(--fz-xs); color: var(--bz-dim); margin-left: 2px; }

/* переворот: рубашка -> лицо (JS ставит .bz-flip только что раскрытому) */
.bz-flip { animation: bz-flip-in 700ms var(--ease-out) backwards; transform-origin: center; }
.bz-flip .bz-card, .bz-flip .bz-sphere { animation: bz-flip-face 700ms var(--ease-out) backwards; }
@keyframes bz-flip-in { 0% { background-color: color-mix(in srgb, var(--a) 40%, transparent); } 100% { } }
@keyframes bz-flip-face {
  0% { transform: perspective(300px) rotateY(180deg); filter: brightness(.3); }
  50% { transform: perspective(300px) rotateY(90deg); filter: brightness(.6); }
  100% { transform: perspective(300px) rotateY(0); filter: none; }
}

/* несколько противников */
.bz-opp { display: flex; flex-direction: column; gap: var(--space-4); }
.bz-opp + .bz-opp { padding-top: var(--space-4); border-top: 1px solid var(--border); }
.bz-opp-h { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; color: #f4c9c3; }

/* ── схватка: полоса по центру над лентой ── */
.bz-clashbox {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: var(--space-2) auto 0; padding: var(--space-2) var(--space-4);
  width: min(720px, calc(100% - 2 * var(--space-4)));
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.bz-clashbox[hidden] { display: none; }
.bz-clash { display: grid; grid-template-columns: 1fr minmax(160px, 1.3fr) 1fr; align-items: center; gap: var(--space-3); width: 100%; }
.bz-cside { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.bz-cside.l { justify-content: flex-end; text-align: right; }
.bz-cname { display: flex; flex-direction: column; min-width: 0; font-weight: 700; font-size: var(--fz-base); color: var(--a-text); line-height: 1.2; }
.bz-cname small { font-size: var(--fz-xs); font-weight: 400; color: var(--bz-dim); }
.bz-cname, .bz-cname small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-cg { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1; }
.lead-l .bz-cside.l .bz-cg, .lead-r .bz-cside.r .bz-cg { color: var(--a-text); }
.lead-l .bz-cside.r .bz-cg, .lead-r .bz-cside.l .bz-cg { color: var(--muted); }
.bz-bars { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.bz-bar { height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--a) 14%, var(--panel-2)); overflow: hidden; display: flex; }
.bz-bar.l { justify-content: flex-end; }
.bz-bar-fill { display: block; height: 100%; width: 0; background: var(--a); transition: width 700ms var(--ease-spring); }
.bz-bolt { font-size: 20px; line-height: 1; color: var(--bz-haos); }
.bz-tally { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--fz-sm); color: var(--bz-dim); }
.bz-tally b { color: var(--ink); font-size: var(--fz-base); font-variant-numeric: tabular-nums; }
.bz-tally-lbl { margin-right: var(--space-1); }

/* ── баннер события: вспышка-плашка над лентой ── */
.bz-banner {
  position: absolute; left: 50%; z-index: 8; pointer-events: none;
  min-width: 280px; max-width: min(560px, calc(100% - 32px));
  padding: var(--space-3) var(--space-6); text-align: center;
  background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  opacity: 0; transform: translate(-50%, -8px);
}
.bz-banner.show { animation: bz-banner 2600ms var(--ease-out) both; }
.bz-banner-big { font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--accent); line-height: 1.15; }
.bz-banner-sub { margin-top: 4px; font-size: var(--fz-sm); color: var(--ink); line-height: 1.4; }
@keyframes bz-banner {
  0% { opacity: 0; transform: translate(-50%, -8px) scaleX(.6); }
  10% { opacity: 1; transform: translate(-50%, 0) scaleX(1.04); }
  16% { transform: translate(-50%, 0) scaleX(1); }
  82% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}

/* ── узкий экран: полоса «у кого что» сверху, касание раскрывает панели ── */
.bz-strip { position: relative; z-index: 7; margin: var(--space-2) var(--space-3) 0; }
.bz-strip[hidden] { display: none; }
.bz-strip-btn {
  width: 100%; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--space-3);
  padding: var(--space-2) var(--space-3); text-align: left;
  background: var(--panel); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; font-size: var(--fz-sm); cursor: pointer;
}
.bz-strip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bz-sum { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.bz-sum > b { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-sum-k { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.bz-sum-k em { font-style: normal; color: var(--muted); }
.bz-ico { display: inline-block; flex: 0 0 auto; }
.bz-ico.k-0 { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.bz-ico.k-1 { width: 8px; height: 11px; border-radius: 1px; background: var(--muted); }
.bz-ico.k-2 { width: 8px; height: 11px; border-radius: 1px; border: 1px solid var(--muted); }
.bz-strip-vs { color: var(--muted); font-weight: 700; }
.bz-strip-caret { margin-left: auto; color: var(--muted); }
/* раскрытая полоса ложится поверх ленты, а не в поток: иначе она выталкивает поле ввода за экран */
.bz-strip-body {
  position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  max-height: 60vh; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-2); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.bz-strip-body .bz-panel { position: static; width: auto; height: auto; }
.bz-strip-body .bz-body { overflow: visible; }

@media (max-width: 699px) {
  .bz-clashbox { width: auto; margin: var(--space-2) var(--space-3) 0; padding: var(--space-2) var(--space-3); }
  .bz-clash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "l r" "bars bars"; gap: 6px var(--space-2); }
  .bz-cside.l { grid-area: l; } .bz-cside.r { grid-area: r; } .bz-bars { grid-area: bars; }
  .bz-cg { font-size: 22px; }
  .bz-cname { font-size: var(--fz-sm); }
  .bz-banner { min-width: 0; width: calc(100% - 32px); padding: var(--space-3) var(--space-4); }
  .bz-banner-big { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .bz-bak.active .bz-sphere::before { animation: none; opacity: .6; }
  .bz-flip, .bz-flip .bz-card, .bz-flip .bz-sphere { animation: none; }
  .bz-bar-fill { transition: none; }
  .bz-banner.show { animation: bz-banner-fade 2600ms linear both; }
}
@keyframes bz-banner-fade { 0% { opacity: 0; transform: translate(-50%, 0); } 6%, 88% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }

/* ── арена: полоса над обеими колонками (Творец 25.09, скрин 105) ── #heredoc-ok */
.bz-clashbox.bz-arenabox { padding: 0; width: min(1100px, calc(100% - 2 * var(--space-4))); overflow: hidden; }
.bz-clashbox.bz-arenabox.bz-float { position: absolute; margin: 0; z-index: 41; width: auto; box-shadow: var(--shadow-2); }
.bz-arena {
  position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 34%),
    linear-gradient(260deg, rgba(192, 57, 43, .26) 0%, transparent 34%),
    var(--panel);
}
/* косой разлом по центру, как заставка брола в аниме */
.bz-arena::before, .bz-arena::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 2px; pointer-events: none;
  transform: skewX(-14deg); opacity: .55;
}
.bz-arena::before { left: calc(33.3% + 6px); background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.bz-arena::after { right: calc(33.3% + 6px); background: #e0503f; box-shadow: 0 0 12px #e0503f; }
.bz-a-side { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px 18px; min-width: 0; }
.bz-a-side.them { align-items: flex-end; text-align: right; }
.bz-a-opps { display: flex; justify-content: flex-end; min-width: 0; }
.bz-a-opps.many .bz-a-side { padding: 6px 10px; border-left: 1px solid var(--border); }
.bz-a-opps.many .bz-a-side:first-child { border-left: 0; }
.bz-a-name { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; letter-spacing: .01em; min-width: 0; }
.bz-a-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-a-side.me .bz-a-name { color: color-mix(in srgb, var(--accent) 60%, #fff); }
.bz-a-side.them .bz-a-name { color: #f4c9c3; flex-direction: row-reverse; }
.bz-a-score {
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--border); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink);
}
.bz-a-balls { display: flex; gap: 8px; align-items: flex-end; flex-wrap: nowrap; min-height: 48px; }
.bz-a-side.them .bz-a-balls { flex-direction: row-reverse; }
.bz-a-ball { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bz-a-ball .bz-sphere { width: 38px; height: 38px; }
.bz-a-ball small { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11px; font-weight: 700; color: var(--a-text, var(--muted)); line-height: 1; }
.bz-a-ball.active .bz-sphere { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--a), 0 0 18px 3px color-mix(in srgb, var(--a) 75%, transparent); }
.bz-a-ball.active .bz-sphere::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--a);
  animation: bz-breathe 1.8s ease-in-out infinite; z-index: 2; will-change: transform, opacity;
}
.bz-a-ball.out { opacity: .4; filter: grayscale(.7); }
.bz-a-none { font-size: var(--fz-xs); color: var(--bz-dim); }
.bz-a-cards { display: flex; gap: 12px; font-size: var(--fz-xs); color: var(--bz-dim); }
.bz-a-cnt { display: inline-flex; align-items: center; gap: 4px; }
.bz-a-cnt b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bz-a-cnt em { font-style: normal; color: var(--muted); }
.bz-a-mid { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 12px; min-width: 0; }
.bz-a-clash { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bz-a-clash[hidden] { display: none; }
.bz-vs {
  font-size: 34px; font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.02em;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #fff), #fff 50%, #ff8a7a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .25));
}
.bz-a-status { max-width: 100%; font-size: var(--fz-sm); color: var(--ink); text-align: center; line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bz-a-tl { display: flex; gap: 4px; }
.bz-a-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.bz-a-dot:last-child { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.bz-a-exit { position: absolute; top: 4px; right: 6px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer; }
.bz-a-exit:hover { color: var(--ink); background: var(--panel-2); }

/* ── вкладки и кнопки хода в моей панели ── */
.bz-tabs { display: flex; gap: 4px; padding: 3px; background: var(--panel-2); border-radius: 8px; }
.bz-tab { flex: 1; min-height: 32px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.bz-tab.on { background: var(--accent); color: #fff; }
.bz-tab:focus-visible, .bz-chip:focus-visible, .bz-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* вкладка «Рейтинг»: первая сотня лиги (27.09) */
.bz-league { display: flex; flex-direction: column; gap: 6px; }
.bz-lg-h { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fz-sm); }
.bz-lg-h span, .bz-lg-trend { font-size: var(--fz-xs); color: var(--bz-dim); }
.bz-lg-skip { font-size: var(--fz-xs); padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--bz-haos) 50%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--bz-haos) 10%, transparent); }
.bz-lg-skip b { color: var(--bz-haos-text); }
.bz-lg-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; border: 1px solid var(--bz-back-line); border-radius: 8px; }
.bz-lg-row { display: grid; grid-template-columns: 2.2em 2.4em 34px 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; font-size: var(--fz-sm); border-bottom: 1px solid color-mix(in srgb, var(--bz-back-line) 60%, transparent); }
.bz-lg-ava { position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--bz-back); border: 1px solid var(--bz-back-line); font-weight: 700; color: var(--bz-dim); }
.bz-lg-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.bz-lg-row.top .bz-lg-ava { border-color: color-mix(in srgb, var(--bz-haos) 70%, transparent); }
.bz-lg-row.me .bz-lg-ava { border-color: var(--accent); }
.bz-lg-nm small { display: flex; align-items: center; gap: 5px; }
.bz-lg-nm small .bz-sphere { width: 14px; height: 14px; flex: none; }
.bz-lg-st { margin-left: 6px; font-size: var(--fz-xs); font-weight: 700; }
.bz-lg-st.up { color: var(--bz-pyrus-text); }
.bz-lg-st.down { color: var(--bz-aquos-text); }
.bz-lg-wl { display: flex; flex-direction: column; align-items: flex-end; }
.bz-lg-wl b { font-size: var(--fz-sm); font-variant-numeric: tabular-nums; }
.bz-lg-row:last-child { border-bottom: 0; }
.bz-lg-row.top .bz-lg-pl { color: var(--bz-haos); font-weight: 800; }
.bz-lg-row.bg { color: var(--muted); }
.bz-lg-row.me { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 3px 0 0 var(--accent); font-weight: 700; }
.bz-lg-pl { text-align: right; font-variant-numeric: tabular-nums; color: var(--bz-dim); }
.bz-lg-mv { font-size: var(--fz-xs); font-variant-numeric: tabular-nums; }
.bz-lg-mv.up { color: var(--bz-ventus-text); }
.bz-lg-mv.down { color: var(--bz-pyrus-text); }
.bz-lg-nm { display: flex; flex-direction: column; min-width: 0; }
.bz-lg-nm small { font-size: var(--fz-xs); color: var(--bz-dim); font-weight: 400; }
.bz-lg-wl { font-size: var(--fz-xs); font-variant-numeric: tabular-nums; color: var(--bz-dim); }
.bz-lg-news { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fz-xs); }
.bz-lg-news li.upset b { color: var(--bz-haos-text); }
.bz-lg-news small { display: block; color: var(--bz-dim); }
.bz-setup { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px dashed var(--border); border-radius: 8px; }
.bz-setup-cnt { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fz-xs); color: var(--bz-dim); }
.bz-setup-cnt b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bz-setup-cnt .full b { color: var(--bz-ventus-text); }
.bz-setup-act { display: flex; gap: 6px; flex-wrap: wrap; }
.bz-ctl { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.bz-chip {
  min-height: 28px; padding: 3px 10px; border-radius: 14px; cursor: pointer;
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--border); font: inherit; font-size: var(--fz-xs); font-weight: 700;
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}
.bz-chip:hover:not(:disabled) { border-color: var(--a, var(--accent)); }
.bz-chip.hot { border-color: color-mix(in srgb, var(--a, var(--accent)) 70%, transparent); background: color-mix(in srgb, var(--a, var(--accent)) 22%, var(--panel-2)); }
.bz-chip:disabled { opacity: .45; cursor: default; }
.bz-pick.on { background: color-mix(in srgb, var(--bz-ventus) 30%, var(--panel-2)); border-color: var(--bz-ventus); }
.bz-crd { grid-template-rows: auto auto; row-gap: 6px; }

/* ── кнопка «Брол» вне боя ── */
.bz-toggle {
  position: absolute; z-index: 9; min-height: 34px; padding: 4px 14px; border-radius: 17px; cursor: pointer;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 45%, var(--panel)), color-mix(in srgb, #c0392b 45%, var(--panel)));
  color: #fff; border: 1px solid var(--border); font: inherit; font-weight: 800; box-shadow: var(--shadow-1);
}
.bz-toggle:hover { filter: brightness(1.12); }

@media (max-width: 699px) {
  .bz-arena { grid-template-columns: 1fr 1fr; grid-template-areas: "mid mid" "me them"; }
  .bz-a-mid { grid-area: mid; } .bz-a-side.me { grid-area: me; } .bz-a-opps { grid-area: them; }
  .bz-arena::before, .bz-arena::after { display: none; }
  .bz-a-side { padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .bz-a-ball.active .bz-sphere::before { animation: none; opacity: .6; }
}

/* ── сколько угодно игроков: группа стороны, ростер строками, вкладки соперников ── */
.bz-a-group { display: flex; min-width: 0; }
.bz-a-group.them { justify-content: flex-end; }
.bz-a-group.many:not(.roster) > .bz-a-side { flex: 1 1 0; padding: 6px 10px; }
.bz-a-group.many:not(.roster) > .bz-a-side + .bz-a-side { border-left: 1px solid var(--border); }
.bz-a-group.roster { flex-direction: column; justify-content: flex-start; gap: 2px; padding: 6px 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.bz-r-row { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 1px 6px; border-radius: 6px; flex: 0 0 auto; }
.bz-a-group.them .bz-r-row { flex-direction: row-reverse; text-align: right; }
.bz-r-row.focus { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.bz-a-group.them .bz-r-row.focus { background: rgba(192, 57, 43, .22); }
.bz-r-nm { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: var(--fz-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-a-group.me .bz-r-nm { color: color-mix(in srgb, var(--accent) 60%, #fff); }
.bz-a-group.them .bz-r-nm { color: #f4c9c3; }
.bz-r-balls { display: inline-flex; gap: 3px; align-items: center; flex: 0 0 auto; }
.bz-a-group.them .bz-r-balls { flex-direction: row-reverse; }
.bz-r-balls .bz-a-ball small { display: none; }
.bz-r-balls .bz-sphere { width: 20px; height: 20px; border-width: 1px; }
.bz-r-balls .bz-q { font-size: 11px; }
.bz-r-more { font-size: var(--fz-xs); color: var(--muted); }
.bz-r-row .bz-a-cards { gap: 6px; flex: 0 0 auto; }
.bz-a-score.sm { min-width: 20px; height: 20px; font-size: 12px; padding: 0 5px; }
.bz-otabs { display: flex; flex-wrap: wrap; gap: 4px; }
.bz-otab { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; max-width: 100%; padding: 3px 10px; border-radius: 15px; cursor: pointer;
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--border); font: inherit; font-size: var(--fz-xs); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-otab b { font-variant-numeric: tabular-nums; color: var(--muted); }
.bz-otab.on { background: rgba(192, 57, 43, .3); border-color: #e0503f; }
.bz-otab.clash::before { content: '⚡'; color: var(--bz-haos); }
.bz-otab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bz-ally { padding-top: var(--space-4); border-top: 1px solid var(--border); }
.bz-ally .bz-opp-h { color: color-mix(in srgb, var(--accent) 60%, #fff); }

/* арена во всю ширину полосы; общий счёт в арене не нужен - он у каждого игрока */
.bz-arenabox > .bz-arena { width: 100%; align-self: stretch; }
.bz-arena .bz-tally { display: none; }

/* уникальная карта бакугана: чья она */
.bz-bind { display: inline-block; margin: 2px 0; padding: 0 6px; border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--bz-haos-text); background: color-mix(in srgb, var(--bz-haos) 16%, transparent); border: 1px solid color-mix(in srgb, var(--bz-haos) 45%, transparent); }

/* ── закреплённая колода и крупные свои шары в арене (Творец 25.09, скрин 108) ── */
.bz-setup.locked { border-style: solid; border-color: color-mix(in srgb, var(--bz-ventus) 55%, transparent); background: color-mix(in srgb, var(--bz-ventus) 8%, transparent); }
.bz-lock-h { font-weight: 800; font-size: var(--fz-sm); color: var(--bz-ventus-text); }
.bz-deckbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fz-xs); font-weight: 700; color: var(--bz-ventus-text); }
.bz-a-ball { min-width: 44px; }
.bz-a-bn { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink); max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; }
.bz-a-side.me .bz-a-ball .bz-sphere { width: 54px; height: 54px; }
.bz-a-side.them .bz-a-ball .bz-sphere { width: 46px; height: 46px; }
.bz-a-side.me .bz-a-ball small { font-size: 13px; }
.bz-a-balls { gap: 12px; min-height: 76px; }
.bz-a-ball.unk .bz-a-bn { display: none; }
.bz-r-balls .bz-a-bn { display: none; }

/* «Закрыть» заметно, а не крестик в углу (Творец 25.09, скрин 109) */
.bz-a-exit { width: auto; height: 28px; padding: 0 12px; top: 6px; right: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); color: var(--ink); font: inherit; font-size: var(--fz-xs); font-weight: 700; }

/* ── свёрнутые разделы и поиск (Творец 26.09, скрин 114) ── */
button.bz-sec-h { width: 100%; padding: 4px 2px; background: transparent; border: 0; border-radius: 4px; font: inherit; font-size: var(--fz-sm); font-weight: 700; color: var(--bz-dim); cursor: pointer; text-align: left; }
button.bz-sec-h:hover { color: var(--ink); background: var(--panel-2); }
button.bz-sec-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bz-caret { font-style: normal; display: inline-block; width: 1em; color: var(--muted); }
.bz-sec.shut { gap: 0; }
.bz-search {
  width: 100%; min-height: 34px; padding: 6px 10px; border-radius: 8px;
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--border); font: inherit; font-size: var(--fz-sm);
}
.bz-search:focus { outline: none; border-color: var(--accent); }

/* строка бакугана/карты открывает полную карточку по клику (26.09) */
.bz-open { cursor: pointer; }
.bz-open:hover { filter: brightness(1.12); }
.bz-open:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; }

/* 27.09: переключатель рейтинга «Город / Дом» и строки домашней лиги Сада */
.bz-rank-sw { display: flex; gap: 6px; padding: 6px 8px 2px; }
.bz-rank-sw button { flex: 1; font: inherit; font-size: var(--fz-sm); padding: 4px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--bz-back-line) 80%, transparent); background: transparent; color: inherit; cursor: pointer; }
.bz-rank-sw button.on { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.bz-hm-baks { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.bz-hm-bak { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.bz-hm-kid { opacity: .6; }
.bz-lg-row.kid .bz-lg-ava { border-style: dashed; }
/* 27.09 (скрин 127): «Дом» читался плохо - таблица в 9 строк, патч одним абзацем, пустой столбец */
.bz-lg-row.home { grid-template-columns: 2em 34px 1fr auto; }
.bz-lg-row.home .bz-lg-nm > span { font-weight: 600; }
.bz-league .bz-lg-list { max-height: min(62vh, 900px); }
.bz-hm-pd { border: 1px solid var(--bz-back-line); border-radius: 8px; padding: 4px 8px; font-size: var(--fz-sm); }
.bz-hm-pd > summary { cursor: pointer; }
.bz-hm-patch { list-style: none; margin: 6px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.bz-hm-patch li { line-height: 1.35; }
.bz-hm-patch small { display: block; color: var(--bz-dim); }
.bz-hm-patch .down { color: var(--bz-pyros, #e0664f); font-weight: 600; }
.bz-hm-patch .up { color: var(--bz-ventus, #3fb27f); font-weight: 600; }
.bz-opp-h .bz-chip { white-space: nowrap; flex: none; }

/* ── 02.10 (скрин 176): бакуганы плиткой в ряд, карты врат и способностей двумя колонками ── */
.bz-sec-bak:not(.shut) { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.bz-sec-bak > .bz-sec-h, .bz-sec-bak > .bz-backs { grid-column: 1 / -1; }
.bz-sec-bak .bz-bak { grid-template-columns: 28px 1fr auto; gap: 6px; padding: 5px 6px; align-content: start; }
.bz-sec-bak .bz-bak .bz-sphere { width: 28px; height: 28px; }
.bz-sec-bak .bz-bak .bz-g { font-size: 15px; }
.bz-sec-bak .bz-bak .bz-sub.bz-eff { grid-column: 1 / -1; font-size: 11px; }
.bz-sec-bak .bz-bak .bz-ctl .bz-chip { min-height: 22px; padding: 1px 8px; }
.bz-bak.out { opacity: .38; filter: grayscale(.8); }
.bz-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; align-items: start; }
.bz-cols > .bz-sec { min-width: 0; }
.bz-cols .bz-crd { grid-template-columns: 24px 1fr; padding: 2px 0; }
.bz-cols .bz-crd .bz-chip { min-height: 22px; padding: 1px 8px; }
.bz-opp + .bz-opp { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.bz-opp.clash .bz-opp-h span { color: var(--bz-pyrus-text, var(--ink)); }

/* ── 02.10 (скрины 180-181): поле брола - карты врат в ряд слева направо, кто на них стоит ── */
.bz-field { display: flex; align-items: stretch; gap: 6px; padding: 6px 10px 8px; overflow-x: auto; border-top: 1px solid var(--border); }
.bz-field-h { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bz-dim); align-self: center; }
.bz-fcard { flex: 0 0 auto; min-width: 120px; max-width: 190px; padding: 5px 8px; border-radius: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 1.25;
  background: color-mix(in srgb, var(--bz-aquos, #3b82f6) 12%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--bz-aquos, #3b82f6) 55%, transparent); }
.bz-fcard.theirs { background: color-mix(in srgb, var(--bz-pyrus, #ef4444) 12%, var(--panel-2)); border-color: color-mix(in srgb, var(--bz-pyrus, #ef4444) 55%, transparent); }
.bz-fcard.closed { border-style: dashed; }
.bz-fc-own { font-size: 10px; color: var(--bz-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-fc-nm { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-fc-eff { color: var(--bz-dim); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bz-fc-baks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.bz-fc-bak { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; padding: 1px 6px 1px 2px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); }
.bz-fc-bak.mine { border-color: color-mix(in srgb, var(--bz-aquos, #3b82f6) 60%, transparent); }
.bz-fc-bak.theirs { border-color: color-mix(in srgb, var(--bz-pyrus, #ef4444) 60%, transparent); }
.bz-fc-bak .bz-sphere { width: 14px; height: 14px; }
.bz-arenabox > .bz-arena { height: auto; min-height: 150px; flex: none; }
.bz-arenabox > .bz-field { flex: none; width: 100%; align-self: stretch; box-sizing: border-box; }

/* ── 02.10 (скрин 184): стол брола - карты врат с рисунком, шары бакуганов на картах ── */
.bz-table { gap: 10px; padding: 8px 12px 10px; align-items: center; }
.bz-tcard { flex: 0 0 auto; width: 132px; display: grid; grid-template-rows: 30px 118px 30px; gap: 4px; cursor: pointer; outline: none; }
.bz-tc-row { display: flex; justify-content: center; align-items: center; gap: 3px; min-height: 30px; }
.bz-tc-face { position: relative; border-radius: 9px; padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--a) 55%, transparent) 0%, color-mix(in srgb, var(--panel) 80%, transparent) 60%), url("/item-art/bakugan/GateCard.jpg") center/cover, var(--panel-2);
  border: 2px solid color-mix(in srgb, var(--a) 75%, var(--border)); box-shadow: 0 2px 10px rgba(0,0,0,.35); transition: transform var(--motion-fast, .15s) ease, box-shadow var(--motion-fast, .15s) ease; }
.bz-tcard:hover .bz-tc-face, .bz-tcard:focus-visible .bz-tc-face { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.bz-tcard.mine .bz-tc-face { border-bottom: 4px solid var(--bz-aquos, #3b82f6); }
.bz-tcard.theirs .bz-tc-face { border-top: 4px solid var(--bz-pyrus, #ef4444); }
.bz-tcard.closed .bz-tc-face { background: repeating-linear-gradient(45deg, var(--panel-2) 0 8px, color-mix(in srgb, var(--panel-2) 70%, #000) 8px 16px); border-style: dashed; }
.bz-tcard.hot .bz-tc-face { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px #f5c542, 0 0 18px 2px rgba(245,197,66,.55); }
.bz-tc-own { font-size: 10px; font-weight: 700; color: var(--ink); text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-tc-nm { font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000; line-height: 1.15; }
.bz-tcard.closed .bz-tc-nm { font-size: 34px; text-align: center; margin-top: 8px; opacity: .7; }
.bz-tc-eff { margin-top: auto; font-size: 11px; line-height: 1.25; color: #fff; background: rgba(0,0,0,.55); border-radius: 5px; padding: 3px 5px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.bz-tb { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 1px; border-radius: 14px; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer;
  color: var(--ink); background: var(--panel); border: 1px solid var(--border); max-width: 130px; }
.bz-tb.mine { border-color: color-mix(in srgb, var(--bz-aquos, #3b82f6) 70%, transparent); }
.bz-tb.theirs { border-color: color-mix(in srgb, var(--bz-pyrus, #ef4444) 70%, transparent); }
.bz-tb.fight { box-shadow: 0 0 0 2px #f5c542; }
.bz-tb .bz-sphere { width: 24px; height: 24px; flex: none; }
.bz-tb-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }
.bz-tb b { color: var(--a-text); font-variant-numeric: tabular-nums; }