/* Акулик · турнирные сетки. Цвета берутся из переменных темы, с запасными значениями для админки. */
.akb-bracket {
  --b-ink: var(--ink, #000000);
  --b-paper: var(--paper, #F7F7F5);
  --b-card: var(--card, #FFFFFF);
  --b-line: var(--line, #D6D6D1);
  --b-mute: var(--mute, #5E5E5A);
  --b-accent: var(--accent, #3A2DFF);
  --b-win: var(--ink, #000000);
  position: relative;
  font-family: var(--font-body, 'Golos Text', system-ui, sans-serif);
  color: var(--b-ink);
  transition: box-shadow .4s;
}
.akb-flash { box-shadow: 0 0 0 2px color-mix(in srgb, var(--b-accent) 40%, transparent); border-radius: 14px; }
.akb-empty { color: var(--b-mute); padding: 24px 0; }

.akb-top { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.akb-progress { flex: 0 0 160px; height: 4px; background: var(--b-line); border-radius: 4px; overflow: hidden; }
.akb-progress i { display: block; height: 100%; background: var(--b-ink); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.akb-progress__txt { font-size: 13px; color: var(--b-mute); }

.akb-scroll { overflow-x: auto; overflow-y: hidden; padding: 4px 2px 18px; cursor: grab; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.akb-scroll.is-drag { cursor: grabbing; user-select: none; }
.akb-scroll.has-more { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.akb-scroll:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 4px; }
.akb-canvas { position: relative; width: max-content; min-width: 100%; }
.akb-lines { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.akb-lines path { fill: none; stroke: var(--b-line); stroke-width: 1.5; }

.akb-section { margin-bottom: 28px; position: relative; }
.akb-section__title { font: 600 11px/1 var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--b-mute); margin: 0 0 12px; }
.akb-cols { display: flex; gap: 44px; align-items: stretch; }
.akb-cols--rr { flex-wrap: wrap; gap: 22px; }
.akb-col { display: flex; flex-direction: column; width: 228px; flex: 0 0 228px; }
.akb-col__title { font-size: 12px; font-weight: 600; color: var(--b-mute); padding: 6px 10px; border-bottom: 1px solid var(--b-line); margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akb-col__list { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 14px; }
.akb-cols--rr .akb-col__list { justify-content: flex-start; }
.akb-col--final .akb-col__title { color: var(--b-accent); }

.akb-match { position: relative; padding-left: 22px; }
.akb-match.is-bye, .akb-match.is-skip { visibility: hidden; }
.akb-id { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font: 500 10px var(--font-mono, monospace); color: var(--b-mute); width: 18px; text-align: right; }
.akb-meta .akb-id { display: none; }
.akb-box { background: var(--b-card); border: 1px solid var(--b-line); border-radius: 10px; overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
.akb-match.is-live .akb-box { border-color: var(--b-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-accent) 14%, transparent); }
.akb-match.is-open .akb-box { border-color: color-mix(in srgb, var(--b-ink) 40%, var(--b-line)); }
.akb-match:hover .akb-box { transform: translateY(-1px); }

.akb-slot { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 0; font-size: 13px; transition: background .2s; }
.akb-slot + .akb-slot { border-top: 1px solid var(--b-line); }
.akb-seed { flex: 0 0 24px; height: 100%; display: grid; place-items: center; font: 500 10px var(--font-mono, monospace); color: var(--b-mute); background: color-mix(in srgb, var(--b-line) 45%, transparent); }
.akb-logo { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; }
.akb-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
a.akb-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.akb-name--ph { color: var(--b-mute); font-style: italic; font-size: 12px; }
.akb-score { flex: 0 0 auto; min-width: 18px; text-align: right; font: 600 13px var(--font-mono, monospace); color: var(--b-mute); }
.akb-slot.is-win { font-weight: 700; }
.akb-slot.is-win .akb-score { color: var(--b-ink); }
.akb-slot.is-win .akb-seed { background: var(--b-ink); color: var(--b-paper); }
.akb-slot.is-lose .akb-name { opacity: .55; }
.akb-slot.is-hl, .akb-table tr.is-hl { background: color-mix(in srgb, var(--b-accent) 12%, transparent); }

.akb-meta { display: flex; gap: 8px; margin-top: 5px; font-size: 11px; color: var(--b-mute); padding-left: 2px; }
.akb-live { color: var(--b-accent); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.akb-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: akb-pulse 1.4s infinite; }
.akb-stream { color: inherit; }
@keyframes akb-pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

.akb-standings h3 { font-size: 14px; margin: 8px 0 10px; }
.akb-table { border-collapse: collapse; width: 100%; max-width: 640px; font-size: 14px; }
.akb-table th { text-align: left; font: 600 11px var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--b-mute); padding: 8px 10px; border-bottom: 1px solid var(--b-line); }
.akb-table td { padding: 9px 10px; border-bottom: 1px solid var(--b-line); font-variant-numeric: tabular-nums; }
.akb-table tr.is-first td { font-weight: 700; }
.akb-table__name a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .akb-box, .akb-progress i { transition: none; }
  .akb-live::before { animation: none; }
}