/* Страница «Загрузка реплеев» и просмотр боёв рот: загрузка, сводка, разбор боя.
   Таблицы — datatable.css, графики — charts.css. */

/* ── Загрузка ── */
#multi-upload-area {
  border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 28px; margin-bottom: 16px;
  text-align: center; cursor: pointer; transition: .15s; background: var(--panel);
}
#multi-upload-area:hover, #multi-upload-area.drag-over { border-color: var(--acc); background: var(--acc-soft); }
#multi-upload-area .icon {
  width: 40px; height: 40px; margin: 0 auto 10px; border-radius: var(--radius-sm);
  background: var(--acc-soft); color: var(--acc); display: grid; place-items: center; font: 600 22px/1 var(--fb);
}
#multi-upload-area p { color: var(--dim); font-size: 13.5px; line-height: 1.6; }
#multi-upload-area strong { color: var(--hi); font-weight: 600; }
#multi-file-input { display: none; }
.upload-note { display: inline-block; margin-top: 6px; font-size: 12.5px; color: var(--dim); }

#multi-progress-wrap { margin-bottom: 14px; }
.prog-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--dim); margin-bottom: 6px; font-weight: 600; }
.prog-bar { height: 4px; background: var(--line); border-radius: 99px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 99px; transition: width .3s; background: var(--acc); }

.upload-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; padding: 10px 14px;
  border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); font-size: 13.5px; color: var(--text);
}
.upload-summary b { color: var(--hi); }
.upload-summary i { color: var(--acc); }
.upload-summary__hint { color: var(--dim); font-size: 12.5px; }
#upload-progress { margin-bottom: 14px; }
#upload-progress:empty { display: none; }
.fq-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px; margin-bottom: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px;
}
.ri-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
.fq-name { flex: 1; color: var(--hi); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fq-status { font-size: 12.5px; font-weight: 600; white-space: nowrap; min-width: 80px; text-align: right; cursor: help; }
.fq-ok { color: var(--win); } .fq-err { color: var(--loss); } .fq-wait { color: var(--dim); } .fq-skip { color: var(--mid); }

.error-bar {
  background: var(--t2-soft); border: 1px solid var(--loss); color: var(--loss);
  border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px; font-weight: 600;
}

/* ── Сводка ── */
.mv-strip-card { margin-bottom: 16px; }
.mv-title { margin-top: 24px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mv-hint { font: 400 12.5px var(--fb); color: var(--dim); text-transform: none; letter-spacing: 0; }
.mv-block { margin-bottom: 8px; }

/* Ячейки таблиц */
.enemy-cell { display: inline-flex; align-items: center; gap: 8px; }
.score-cell { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text); }
.score-cell b { color: var(--hi); }
.share-cell { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.share-cell__bar { width: 48px; height: 4px; border-radius: 99px; background: var(--line2); overflow: hidden; }
.share-cell__bar i { display: block; height: 100%; background: var(--viz-1); }
.dmg-cell { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.dmg-cell b { min-width: 46px; text-align: right; color: var(--hi); font-weight: 600; }
.dmg-cell__bar { width: 44px; height: 4px; border-radius: 99px; background: var(--line2); overflow: hidden; }
.dmg-cell__bar i { display: block; height: 100%; }
.kills-badge {
  display: inline-block; min-width: 24px; text-align: center; padding: 0 7px; border-radius: var(--pill);
  background: var(--panel2); border: 1px solid var(--line); color: var(--hi); font: 600 13px var(--fn);
}
.alive { color: var(--win); font-weight: 600; font-size: 13px; }
.dead { color: var(--dim); font-size: 13px; }
.veh { color: var(--text); }
.num { color: var(--dim); font-family: var(--fn); }
.pname { cursor: pointer; color: var(--hi); font-weight: 600; }
.pname:hover { text-decoration: underline; text-underline-offset: 3px; }
.clan { color: var(--dim); font-size: 12.5px; }
.clan-link { color: var(--dim); font-size: 12.5px; text-decoration: none; transition: .15s; }
.clan-link:hover { color: var(--hi); text-decoration: underline; }
.team-tag { font-size: 12.5px; font-weight: 600; }
.team-tag::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.team-tag.is-ally::before { background: var(--t1); }
.team-tag.is-enemy::before { background: var(--t2); }

/* ── Разбор боя ── */
#btl-back-btn { margin-bottom: 14px; }
.btl-compare-card { margin-bottom: 16px; padding: 14px 16px 12px; }
/* Сравнение команд компактно: 2 столбца по 3 показателя (заполняются сверху вниз) */
.btl-compare-card .viz-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto);
  grid-auto-flow: column; gap: 2px 28px; }
.btl-compare-card .viz-card__sub { margin-bottom: 8px; }
@media (max-width: 640px) {
  .btl-compare-card .viz-compare { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}

.hero { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; box-shadow: var(--shadow); }
.duel {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 22px 28px;
  background: linear-gradient(90deg, var(--t1-soft), transparent 35%, transparent 65%, var(--t2-soft));
}
.side { min-width: 0; }
.side .tag { display: block; font: var(--fh-w) clamp(24px, 3vw, 36px)/1.1 var(--fh); color: var(--hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.tag:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.side .lbl { margin-top: 6px; font-size: 13px; font-weight: 600; }
.side.l .lbl { color: var(--t1); }
.side.r { text-align: right; } .side.r .lbl { color: var(--t2); }
.mid { text-align: center; }
.score { font: 600 clamp(40px, 5vw, 56px)/1 var(--fb); color: var(--hi); white-space: nowrap; cursor: help; }
.score i { font-style: normal; color: var(--dim); margin: 0 .12em; }
.result { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: var(--pill); font: 600 12.5px var(--fb); background: var(--panel2); color: var(--text); }
.result.win { background: var(--win); color: var(--win-ink); }
.result.loss { background: var(--loss); color: var(--loss-ink); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line2); border-top: 1px solid var(--line); }
.facts div { padding: 10px 16px; background: var(--panel); min-width: 0; }
.facts label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 2px; }
.facts b { display: block; font: 600 14.5px var(--fb); color: var(--hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.battle-grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .battle-grid { grid-template-columns: minmax(0, 1fr); } }

.btl-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--panel2); border: 1px solid var(--line); border-radius: calc(var(--radius-sm) + 3px); }
.tab { padding: 6px 14px; border: none; border-radius: var(--radius-sm); background: none; color: var(--dim); cursor: pointer; font: 600 13px var(--fb); transition: .12s; }
.tab:hover { color: var(--hi); }
.tab.active { background: var(--panel); color: var(--hi); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.panel { display: none; } .panel.active { display: grid; gap: 16px; animation: fadeUp .15s ease; }
.dropdown__menu--right { left: auto; right: 0; }
.btn--sm { padding: 5px 10px; font-size: 12.5px; }

.team-card { --tc: var(--hi); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.team-card.ally { --tc: var(--t1); } .team-card.enemy { --tc: var(--t2); }
.team-head {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line);
  box-shadow: inset 3px 0 var(--tc); font: 600 15px var(--fb); color: var(--hi);
}
.team-head .dropdown { margin-left: auto; }
.team-head__sum { font-size: 13px; font-weight: 500; color: var(--dim); }
.badge { margin-left: auto; font: 600 12px var(--fb); padding: 3px 10px; border-radius: var(--pill); background: var(--panel2); color: var(--dim); }
.b-win { background: var(--win); color: var(--win-ink); }
.b-loss { color: var(--dim); }

/* Карта */
.map-img-wrap { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
@media (max-width: 1100px) { .map-img-wrap { position: relative; top: 0; max-width: 560px; } }
.map-img-wrap:empty { display: none; }

/* Кнопка увеличения карты: маленькая, полупрозрачная, заметнее при наведении */
.map-zoom {
  position: absolute; right: 8px; bottom: 8px; z-index: 12;
  width: 28px; height: 28px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 7px;
  background: rgba(10, 12, 15, .45); color: rgba(255, 255, 255, .8); font-size: 12px;
  opacity: .6; backdrop-filter: blur(4px); transition: opacity .15s, background .15s, transform .15s;
}
.map-img-wrap:hover .map-zoom { opacity: .85; }
.map-zoom:hover { opacity: 1; background: rgba(10, 12, 15, .7); color: #fff; transform: scale(1.06); }
.map-zoom:focus-visible { opacity: 1; outline: 2px solid var(--acc); outline-offset: 2px; }
/* Увеличенная карта — по центру экрана */
.map-img-wrap.is-zoomed {
  position: fixed; z-index: 500; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(92vh, 92vw); max-width: none; box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}
.map-img-wrap.is-zoomed .map-zoom { width: 34px; height: 34px; right: 12px; bottom: 12px; font-size: 14px; opacity: .8; }
.map-zoom-backdrop { position: fixed; inset: 0; z-index: 499; background: rgba(0, 0, 0, .72); backdrop-filter: blur(2px); cursor: zoom-out; }
.map-zoom-backdrop[hidden] { display: none; }
.traj-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.map-img { width: 100%; display: block; object-fit: contain; background: var(--panel); }
.map-img-placeholder { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--dim); font-size: 13px; }
.map-lbl-big { font: var(--fh-w) 17px var(--fh); color: var(--hi); }
/* Под картой: «Траектории / Тепловая карта» и подсказка */
.traj-players__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.traj-players__head span { font-size: 11.5px; color: var(--dim); }
.traj-modes { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); }
.traj-modes button {
  padding: 5px 11px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--text); font: 600 12px var(--fb); white-space: nowrap; transition: .12s;
}
.traj-modes button:hover:not(.is-active) { color: var(--hi); }
.traj-modes button.is-active { background: var(--acc); color: var(--acc-ink); }

/* Траектории: наведение и подпись */
.traj-canvas.is-interactive { pointer-events: auto; cursor: crosshair; touch-action: pan-y; }
.traj-tip {
  position: absolute; z-index: 11; display: flex; align-items: center; gap: 7px; pointer-events: none; white-space: nowrap;
  padding: 5px 9px; border-radius: var(--radius-sm); background: rgba(10, 12, 15, .92); color: #fff;
  font-size: 12.5px; box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.traj-tip[hidden] { display: none; }
.traj-tip i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.traj-tip span { color: #aab2c0; }
.traj-tip em { font-style: normal; font-size: 11px; padding: 0 5px; border-radius: 4px; background: #ffd700; color: #1a1408; font-weight: 700; }

/* Игроки под картой с цветами их линий */
.btl-map-col { min-width: 0; }
.traj-players { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.traj-players[hidden] { display: none; }
.traj-players__group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.traj-players__title { width: 100%; font-size: 11.5px; color: var(--dim); }
.traj-player {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); color: var(--text); font: 500 12px var(--fb); cursor: pointer; max-width: 100%;
  text-align: left;
}
.traj-player__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.traj-player__text span, .traj-player__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traj-player__text small { font-size: 10.5px; font-weight: 500; color: var(--dim); max-width: 120px; }
.traj-player:hover .traj-player__text small, .traj-player.is-hover .traj-player__text small { color: var(--text); }
.traj-player i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.traj-player:hover, .traj-player.is-hover { border-color: var(--hi); color: var(--hi); background: var(--panel2); }
.traj-player.is-self { font-weight: 700; }
.traj-player.is-pinned { border-color: var(--acc); background: var(--acc-soft); color: var(--hi); box-shadow: inset 0 0 0 1px var(--acc); }

/* Карточка игрока */
#overlay { display: none; position: fixed; inset: 0; background: var(--overlay); z-index: 200; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
#overlay.open { display: flex; }
#modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px;
  width: min(480px, 94vw); position: relative; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35); animation: fadeUp .15s ease;
}
#modal-x { position: absolute; top: 14px; right: 14px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); font-size: 12px; cursor: pointer; width: 30px; height: 30px; border-radius: var(--radius-sm); }
#modal-x:hover { color: var(--hi); border-color: var(--dim); }
#modal h2 { margin: 0 36px 4px 0; font: var(--fh-w) 19px var(--fh); overflow-wrap: anywhere; }
.modal-sub { color: var(--dim); font-size: 13px; margin-bottom: 16px; }
.stat-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line2); }
.stat-row:last-child { border-bottom: none; }
.stat-l { color: var(--dim); font-size: 13.5px; }
.stat-v { color: var(--hi); font: 600 14px var(--fn); }
.stat-v.hl { color: var(--acc); }
.modal-sep { height: 1px; background: var(--line); margin: 8px 0; }

@media (max-width: 760px) {
  .duel { padding: 18px 14px; gap: 12px; }
  .btl-tabs-row { flex-wrap: wrap; }
}

/* Этап, в который сохраняются загружаемые бои */
.upload-stage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.upload-stage[hidden] { display: none; }
.upload-stage__label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.upload-stage__label i { color: var(--acc); }
.upload-stage__select {
  height: 34px; min-width: 220px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--hi); font: 500 13.5px var(--fb); cursor: pointer;
}
.upload-stage__select:disabled { opacity: .6; cursor: default; }
.upload-stage__hint { font-size: 12.5px; color: var(--dim); }