/* Стили страницы «матчи». Отдельным файлом, а не внутри HTML:
   так он качается один раз и живёт в кэше браузера.
   Цвета — только именами из app.css. */

/* ─────────────── карточка матча ───────────────
   Строка результата, как на HLTV: команда — счёт в рамке — команда.
   Проигравший гаснет, победитель остаётся белым; недоигранный матч
   помечен красной кромкой слева. */

.mt{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 16px;margin-bottom:8px;cursor:pointer;
  transition:border-color .14s,background .14s}
.mt:hover{border-color:var(--txt-dim);background:var(--panel-3)}
.mt.live{border-left:3px solid var(--live)}
.mt .line{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mt .side{font-family:var(--ost);font-size:20px;letter-spacing:.04em;text-transform:uppercase;
  flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--txt)}
.mt .side.r{text-align:right}
.mt.win1 .side.r,.mt.win2 .side:not(.r){color:var(--txt-dim)}
.mt .sc{font-family:var(--ost);font-size:22px;letter-spacing:.08em;min-width:96px;
  text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:4px 12px;line-height:1.2;color:var(--txt)}
.mt.live .sc{border-color:var(--live)}
.mt .meta{color:var(--txt-dim);font-size:12px;margin-top:8px;display:flex;gap:14px;
  flex-wrap:wrap;align-items:center}

/* Открытый матч: шапка крупнее и не кликается. */
.mt.big{cursor:default;padding:20px 18px;
  background:linear-gradient(180deg,var(--panel),var(--bg-top));border-top:3px solid var(--accent)}
.mt.big:hover{background:linear-gradient(180deg,var(--panel),var(--bg-top));
  border-color:var(--line);border-top-color:var(--accent)}
.mt.big.live:hover{border-left-color:var(--live)}
.mt.big .side{font-size:26px}
.mt.big .sc{font-size:38px;min-width:130px;padding:6px 16px}

/* ─────────────── строка карт ─────────────── */
/* Счёт по каждой карте, как на HLTV, и она же переключатель. */

.maps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;
  margin-bottom:14px}
.maprow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;cursor:pointer;width:100%;transition:background .14s,border-color .14s}
.maprow:hover{background:var(--panel-3)}
/* Выбранная карта — оранжевая плашка (общее правило button.on из
   app.css). На ней всё пишется тёмным, иначе счёт победителя пропадал. */
.maprow.on .mn,.maprow.on .ms,.maprow.on .ms b{color:var(--on-accent)}
.maprow.on .ms b.won{color:var(--on-accent);font-weight:700}
.maprow .mn{font-family:var(--ost);font-size:15px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt)}
.maprow .ms{font-family:var(--ost);font-size:17px;color:var(--txt-dim);white-space:nowrap}
.maprow .ms b{font-weight:400}
.maprow .ms b.won{color:var(--win-t)}

/* ─────────────── игрок матча ─────────────── */

.mvp{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);
  padding:12px 16px;margin-bottom:14px}
.mvp .t{font-family:var(--man);font-weight:800;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--txt-dim)}
.mvp .t::before{content:"★ ";color:var(--accent)}
.mvp .n{font-family:var(--ost);font-size:20px;letter-spacing:.06em;text-transform:uppercase}
.mvp .r{font-family:var(--ost);font-size:22px;color:var(--accent-hi)}
.mvp .d{color:var(--txt-dim);font-size:12px;margin-left:auto}

/* ─────────────── таблицы ───────────────
   Как таблицы статистики на HLTV: тёмная шапка, тонкие линии, рейтинг
   и разница зелёным или красным. */

table{width:100%;border-collapse:collapse;font-size:13px}
th{font-family:var(--man);font-weight:800;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt-dim);text-align:right;padding:9px 8px;
  background:var(--bg-top);border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child{text-align:left}
td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
td:first-child{text-align:left;white-space:normal}
td.good{color:var(--win-t)}
td.bad{color:var(--loss-t)}
tr.me td{color:var(--accent-hi);font-weight:800;background:var(--accent-bg)}
tr.me td.good,tr.me td.bad{color:var(--accent-hi)}
tr.zero td{color:var(--txt-dim)}
tbody tr:hover td{background:var(--panel-3)}
.tw{overflow-x:auto}

.mapbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin-bottom:14px}
.teamhead{font-family:var(--ost);font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt);margin:0 0 8px;display:flex;align-items:center;gap:9px}
.teamhead::before{content:"";display:inline-block;width:3px;height:14px;
  background:var(--accent);border-radius:2px;flex:none}
.demorow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.demorow:last-child{border-bottom:0}
.demorow .dstate{color:var(--txt-dim);font-size:12px;white-space:nowrap}
.demorow span:first-child{color:var(--txt-dim);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.back{margin-bottom:14px;display:flex;gap:8px;flex-wrap:wrap}

/* метка вида матча */
.kindtag{font-family:var(--man);font-weight:800;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:3px;
  background:var(--panel-3);color:var(--txt-dim)}
.kindtag.custom{background:var(--win);color:var(--on-accent)}

/* Переключатель окна над таблицей игроков — те же вкладки, помельче:
   это выбор среза, а не раздела. */
.kinds{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap}
.kinds .tab{font-size:12px;padding:6px 12px}

/* Рекорды: плитки. Каждая — один конкретный вечер, а не среднее,
   поэтому крупная цифра и рядом кто с чем. */
.recs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.rec{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:var(--r);padding:14px 16px}
.rec .ttl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-dim);margin-bottom:8px;min-height:26px}
.rec .val{font-family:var(--ost);font-size:30px;letter-spacing:.04em;line-height:1;color:#fff}
.rec .val span{font-size:12px;letter-spacing:.14em;color:var(--txt-dim);
  text-transform:uppercase}
.rec .who{margin-top:8px;font-size:14px}
.rec .meta{margin-top:2px;font-size:12px;color:var(--txt-dim)}

/* Заголовок стороны на кастомной карте: слева «Спецназ», справа её счёт. */
.teamhead.side{justify-content:space-between;gap:12px}
.teamhead.side .hsc{font-size:20px;color:var(--txt-dim);letter-spacing:.04em;margin-left:auto}
.teamhead.side.won .hsc{color:var(--win-t)}

/* Ряд «какую статистику показывать» — с подписью слева, чтобы не
   путался с рядом вкладок времени над ним. */
.kinds.pick{align-items:center}
.kinds .klabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-dim);margin-right:4px}

/* ════════════════ узкие экраны и длинные имена ════════════════ */

/* Ник без пробелов растягивал таблицу, а с ней и страницу. Переносим
   по буквам и держим колонку имени в разумной ширине; min-width
   обязателен, иначе обычные ники рвутся на «Барсу/к». */
th:first-child,td:first-child{min-width:110px}
td:first-child{overflow-wrap:anywhere;max-width:230px}
.rec .who,.rec .who a{overflow-wrap:anywhere}

/* Подсказка, что таблица уезжает вбок: тень у края, которую закрывает
   крышка цветом фона, пока в эту сторону прокручивать нечего. */
.tw{--tw-bg:var(--bg);
  background:
    linear-gradient(90deg,var(--tw-bg),rgba(0,0,0,0)) 0 0/22px 100% no-repeat local,
    linear-gradient(270deg,var(--tw-bg),rgba(0,0,0,0)) 100% 0/22px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.55),rgba(0,0,0,0)) 0 0/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.55),rgba(0,0,0,0)) 100% 0/12px 100% no-repeat scroll}
/* Внутри карточки фон другой — крышка должна совпадать с ним. */
.mapbox .tw,.bteam .tw{--tw-bg:var(--panel)}

/* Ссылка на профиль в таблице — с запасом по высоте и ширине, чтобы в
   неё попадали пальцем. */
.tw td a.plink,.rec .who a.plink{display:inline-block;padding:6px 0;
  margin:-6px 0;min-width:30px}

/* Шапка матча в две строки на телефоне: команды одна под другой, счёт
   справа во всю высоту. */
@media (max-width:560px){
  .mt .line{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:2px 12px;align-items:center}
  .mt .side{min-width:0;font-size:17px;white-space:normal;overflow-wrap:anywhere}
  .mt .side.r{grid-column:1;text-align:left}
  .mt .sc{grid-row:1 / span 2;grid-column:2;min-width:0;font-size:22px}
  .mt.big .side{font-size:19px}
  .mt.big .sc{font-size:30px;min-width:0}
  .maps{grid-template-columns:1fr}
}

/* ─────────────── ход карты: лента убийств и мини-карта ─────────────── */

.rblock{margin-top:18px}
.sechead2{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
/* Вид заголовка — общий, см. app.css. */

/* Полоса раундов. Цвет — сторона, которая выиграла раунд: так по одной
   строке видно, где случился перелом, ещё не открывая ни одного раунда. */
.rstrip{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:12px}
.rbtn{font-family:var(--ost);font-size:13px;letter-spacing:.05em;
  min-width:30px;padding:6px 4px;border:0;border-radius:3px;cursor:pointer;
  background:var(--panel-2);color:var(--txt-dim);transition:filter .12s}
.rbtn.ct{background:var(--ct-bg);color:var(--ct)}
.rbtn.tt{background:var(--t-bg);color:var(--t)}
.rbtn:hover:not(:disabled){filter:brightness(1.35);border:0}
.rbtn.on{outline:2px solid var(--accent);outline-offset:-2px;color:#fff}

.rpair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:14px;
  align-items:start}
@media (max-width:820px){.rpair{grid-template-columns:minmax(0,1fr)}}

/* ── лента ── */
.kfeed{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;min-width:0}
.khead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.khead b{font-family:var(--ost);font-size:16px;letter-spacing:.08em;font-weight:400}
.khead .why{color:var(--txt-dim);font-size:12px;flex:1}
.khead .ksc{font-family:var(--ost);font-size:17px}
.khead .ksc b{font-weight:400}
.khead .ksc b.ct{color:var(--ct)}
.khead .ksc b.tt{color:var(--t)}

.kline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:5px 6px;font-size:13px;border-left:3px solid transparent;border-radius:0 3px 3px 0}
.kline:hover,.kline.hot{background:var(--panel-2);border-left-color:var(--accent)}
.kline .kt{color:var(--txt-dim);font-size:11px;min-width:34px;font-variant-numeric:tabular-nums}
.kline .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.kline .who.ct{color:var(--ct)}
.kline .who.tt{color:var(--t)}
.kline .who .plink{color:inherit;text-decoration:none;border-bottom:1px dotted transparent}
.kline .who .plink:hover{border-bottom-color:currentColor}
.kline .kw{color:var(--txt-dim);font-size:12px;padding:0 2px}
.kline .karr{color:var(--txt-dim);font-size:13px}
.kline .assist{color:var(--win-t);font-size:11px}
.kline .kflag{font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-dim);border:1px solid var(--line);border-radius:3px;padding:1px 5px}
.kline .kflag.bad{color:var(--loss-t);border-color:var(--loss)}
.kline .bomb{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.kline .bomb.plant{color:var(--loss-t)}
.kline .bomb.defuse{color:var(--win-t)}

/* ── мини-карта ── */
.rmapwrap{justify-self:end;width:100%;max-width:420px}
.rmaphint{color:var(--txt-dim);font-size:11px;margin-top:6px;line-height:1.5}
.rmapbox{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);aspect-ratio:1/1;width:100%;overflow:hidden}
.rmapimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:.62}
#rmap{position:absolute;inset:0;width:100%;height:100%}
/* Прозрачная, но кликабельная: по тонкой обводке точки мышью
   не попасть, а pointer-events:all ловит и заливку. */
#rmap .hit{fill:transparent;pointer-events:all;cursor:pointer}
#rmap .shot,#rmap .from,#rmap .dead,#rmap .bomb{pointer-events:none}
#rmap .shot{stroke-width:3;opacity:.5}
#rmap .shot.ct{stroke:var(--ct)}
#rmap .shot.tt{stroke:var(--t)}
#rmap .from{opacity:.75}
#rmap .from.ct{fill:var(--ct)}
#rmap .from.tt{fill:var(--t)}
#rmap .dead{fill:none;stroke:var(--loss);stroke-width:4}
#rmap .bomb{fill:none;stroke:var(--loss);stroke-width:4}
#rmap .bomb.defuse{stroke:var(--win)}
#rmap g.hot .shot{opacity:1;stroke-width:5}
#rmap g.hot .dead,#rmap g.hot .bomb{stroke:var(--accent);stroke-width:6}
#rmap g.hot .from{opacity:1}
#rmap.dim g:not(.hot){opacity:.22}
#rmap g{transition:opacity .12s}

/* На телефоне ленту разрежаем: ник — это ссылка в профиль, и пальцем
   в строку высотой 19 точек не попасть. */
@media (max-width:520px){
  .kline{padding:7px 6px;gap:6px}
  .kline .who .plink{display:inline-block;padding:4px 0}
  .kline .who{max-width:120px}
}

/* ── таблица по раундам ── */

/* min(420px,100%) обязателен: голый minmax(420px,1fr) на экране уже
   420 точек всё равно делает колонку в 420 — и таблица вылезает за
   край страницы вместо того, чтобы сжаться. */
.bpair{display:grid;gap:12px;margin-bottom:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.bteam{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  min-width:0;overflow:hidden}
.bteam .teamhead{padding:9px 12px;margin:0}
table.board{width:100%;border-collapse:collapse;font-size:12px;
  min-width:340px}
table.board th{text-align:right;font-weight:400;color:var(--txt-dim);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
table.board th:first-child,table.board td:first-child,
table.board th.buy{text-align:left}
table.board th.mon,table.board td.mon{width:64px}
table.board td{text-align:right;padding:6px 8px;
  border-bottom:1px solid var(--line);white-space:nowrap}
table.board tr:last-child td{border-bottom:0}
table.board tbody tr:hover{background:var(--panel-2)}
table.board .who{max-width:110px;overflow:hidden;text-overflow:ellipsis}
/* Высоту цели не трогаем: таблица лежит в .tw, а там ссылка уже
   растёт полем с обратным отступом. */
table.board .who .plink{color:var(--txt);text-decoration:none;
  border-bottom:1px dotted var(--line)}
table.board .who .plink:hover{border-bottom-color:var(--accent)}
table.board .mon{color:var(--win-t);font-variant-numeric:tabular-nums}
/* Закуп бывает длинным. Обрезаем, полный список — в подсказке. */
table.board .buy{text-align:left;color:var(--txt-dim);max-width:170px;
  overflow:hidden;text-overflow:ellipsis}
table.board .adr{color:var(--txt)}
@media (max-width:520px){
  table.board .buy{max-width:96px}
  table.board .who{max-width:84px}
  table.board td,table.board th{padding:8px 5px}
}

/* ── подвиги ── */

.sec.feats{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin-bottom:14px}
.feats .sechead2{margin-bottom:8px}
.feats table.board .mul{text-align:left;color:var(--accent-hi)}
.feats table.board th.mul{text-align:left}
.feats table.board td.good{color:var(--win-t)}
.feats .muted{font-size:11px;margin-top:8px;line-height:1.5}
/* Раунд, который кто-то вытащил в одиночку, помечаем на полосе. */
.rbtn.cl{box-shadow:inset 0 -3px 0 var(--win)}
.clutch{display:flex;align-items:baseline;gap:8px;font-size:12px;
  padding:5px 8px;margin-bottom:4px;background:var(--panel-2);
  border-left:3px solid var(--win);border-radius:0 3px 3px 0}
.clutch b{font-family:var(--ost);font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;font-size:11px;color:var(--win-t)}

/* ── экономика раундов ── */

.ecobox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin-bottom:14px}
.ecobox .sechead2{margin-bottom:10px}
.ecorow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr));
  gap:6px}
.ecocell{background:var(--panel-2);border-radius:var(--r);padding:10px 12px;display:flex;
  flex-direction:column;gap:3px;border-top:3px solid var(--line)}
.ecocell b{font-family:var(--ost);font-size:18px;font-weight:400;
  letter-spacing:.04em}
.ecocell span{font-size:11px;color:var(--txt-dim);letter-spacing:.06em;
  text-transform:uppercase}
.ecocell.pistol{border-top-color:var(--txt-dim)}
.ecocell.eco{border-top-color:var(--loss)}
.ecocell.force{border-top-color:var(--accent)}
.ecocell.full{border-top-color:var(--win)}
.ecobox .muted{font-size:11px;margin-top:9px;line-height:1.6}

/* Метка типа рядом с названием стороны в таблице раунда. */
.bteam .teamhead .eco{font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 6px;border:1px solid var(--line);
  border-radius:3px;margin-left:8px}
.bteam .teamhead .eco.eco{color:var(--loss-t);border-color:var(--loss)}
.bteam .teamhead .eco.force{color:var(--accent-hi);border-color:var(--accent)}
.bteam .teamhead .eco.full{color:var(--win-t);border-color:var(--win)}
.bteam .teamhead .eco.pistol{color:var(--txt-dim)}
.bteam .teamhead .emoney{margin-left:auto;color:var(--win-t);
  font-size:12px;font-variant-numeric:tabular-nums}

/* Ссылка «как играется карта» — над ходом карты. Не кнопка: уводит на
   другую страницу, и выглядеть как действие внутри матча не должна. */
.aboutmap{margin:16px 0 -6px}
.aboutmap a{font-family:var(--ost);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-dim);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:2px}
.aboutmap a:hover{color:var(--accent-hi);border-bottom-color:var(--accent)}

/* ════════════════ повтор раунда ════════════════ */

/* Пульт под мини-картой: кнопка, полоса времени, часы и скорость. */
.playbar{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;
  align-items:center;margin-top:10px}
.pbtn{font-size:14px;line-height:1;padding:8px 12px;min-width:44px}
.pline{-webkit-appearance:none;appearance:none;width:100%;height:6px;
  background:var(--line);border:0;border-radius:3px;padding:0;margin:0;cursor:pointer}
.pline::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;
  background:var(--accent);border:0;border-radius:50%;cursor:pointer}
.pline::-moz-range-thumb{width:16px;height:16px;background:var(--accent);
  border:0;border-radius:50%;cursor:pointer}
.pline:focus{outline:2px solid var(--accent);outline-offset:3px}
.pclock{font-family:var(--ost);font-size:13px;color:var(--txt-dim);
  white-space:nowrap;min-width:86px;text-align:right}
.pspeed{display:flex;gap:2px}
.pspeed .sp{font-family:var(--ost);font-size:12px;letter-spacing:.06em;
  padding:6px 8px;min-width:34px}
.pspeed .sp.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* ── игроки из записи матча ──
   Кружок в цвет стороны, чёрточка — куда смотрит, имя рядом. Мёртвый
   гаснет и теряет чёрточку: на его месте и так стоит крестик убийства. */
#rmap .pl .body{stroke:var(--bg);stroke-width:2.5}
#rmap .pl.ct .body{fill:var(--ct)}
#rmap .pl.tt .body{fill:var(--t)}
#rmap .pl .look{stroke-width:4;stroke-linecap:round}
#rmap .pl.ct .look{stroke:var(--ct)}
#rmap .pl.tt .look{stroke:var(--t)}
#rmap .pl .nm{font:700 17px var(--man);fill:#fff;paint-order:stroke;
  stroke:var(--bg);stroke-width:4px;pointer-events:none}
#rmap .pl.dead{opacity:.4}
#rmap .pl.dead .look{display:none}
#rmap .pl.dead .body{fill:var(--panel-3)}
/* Гранаты по записи: дым и молотов живут на карте, вспышки мигают. */
#rmap .nade{pointer-events:none}
#rmap .nade.smoke{fill:rgba(215,220,228,.42);stroke:rgba(255,255,255,.55);stroke-width:2}
#rmap .nade.fire{fill:rgba(255,110,30,.42);stroke:rgba(255,170,70,.85);stroke-width:2}
#rmap .nade.flash{fill:#fff;stroke:rgba(255,255,255,.6);stroke-width:6;opacity:.9}
#rmap .nade.he{fill:#ffb347;stroke:rgba(255,120,30,.7);stroke-width:6;opacity:.9}

/* Ещё не случилось: точку прячем совсем, строку ленты гасим. */
#rmap g.soon{opacity:0;pointer-events:none}
.kline.soon{opacity:.22}
.kline.now{background:var(--panel-3)}
#rmap.playing g.dot{transition:opacity .18s}

@media (max-width:560px){
  .playbar{grid-template-columns:auto 1fr;grid-template-areas:
    "pbtn pline" "pclock pspeed";row-gap:8px}
  .pbtn{grid-area:pbtn}
  .pline{grid-area:pline}
  .pclock{grid-area:pclock;text-align:left}
  .pspeed{grid-area:pspeed;justify-content:flex-end}
}

/* ════════════════ лучшие моменты ════════════════
   Оглавление к раунду и к записи матча. Стоит над полосой раундов
   нарочно: это то, ради чего страницу открывают, а полоса — способ
   добраться до всего остального. */
.moments{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;margin:10px 0 14px}
.mtitle2{font-family:var(--ost);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-dim);margin-bottom:10px}
.mline{display:flex;gap:8px;flex-wrap:wrap}
.moment{display:flex;align-items:baseline;gap:8px;background:var(--panel-2);
  border:1px solid var(--line);border-left-width:3px;border-radius:var(--r);
  padding:8px 11px;cursor:pointer;text-transform:none;letter-spacing:0;font-size:13px;
  color:var(--txt)}
.moment:hover:not(:disabled){background:var(--panel-3);border-color:var(--accent)}
.moment b{font-family:var(--ost);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:400}
.moment .mw{color:var(--txt-dim);max-width:14ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.moment .mn{color:var(--txt-dim);font-size:11px;white-space:nowrap}
/* Цвет по редкости, теми же красками, что у подвигов в профиле.
   Приставка m- нарочно: .clutch на этой странице уже занят пометкой в
   шапке раунда. */
.moment.m-ace{border-left-color:var(--loss)}
.moment.m-quad{border-left-color:var(--accent)}
.moment.m-clutch{border-left-color:var(--win)}
.moment.m-knife{border-left-color:var(--txt)}
.moment.m-triple{border-left-color:var(--line)}
/* Ninja defuse — отдельным цветом: он и редкий, и не про убийства. */
.moment.m-ninja{border-left-color:var(--accent-hi,#ffa05a)}
.moments .muted{margin-top:10px;font-size:12px}

/* ─────────────── закуп иконками ───────────────
   Картинка вместо слова: строка «M4A1-S, граната, кевлар и каска»
   читается медленно, а иконки — с одного взгляда. Что картинки не
   имеет (броня, гранаты, набор), остаётся словами рядом. */
td.buy{white-space:normal}
td.buy .gun{display:inline-block;vertical-align:middle;margin:0 4px 0 0;
  line-height:0}
td.buy .gimg{height:18px;width:auto;max-width:64px;object-fit:contain;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
/* Стартовый пистолет никто не покупал — он выдан. Показываем тусклее,
   чтобы не путать с закупом. */
td.buy .gun.start{opacity:.55}
td.buy .gun .gn{font-size:12px;color:var(--txt);line-height:1.4}
td.buy .gun.start .gn{font-size:11px;color:var(--txt-dim)}
td.buy .bw{color:var(--txt-dim);font-size:12px;vertical-align:middle}


/* ═══════════════════ лента матчей ═══════════════════
   Одна лента всех режимов по дням. Строка — как результат на HLTV:
   время, вид матча, команды со счётом, карты, турнир. */

.mfilter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px;border:0}
.mfilter .fk{display:inline-flex;align-items:center;gap:7px;font-family:var(--ost);font-weight:400;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:7px 13px;
  border:1px solid var(--line);border-radius:3px;color:var(--txt-dim);background:var(--panel)}
.mfilter .fk:hover:not(.on){color:#fff;border-color:var(--txt-dim)}
.mfilter .fk .n{font-family:var(--man);font-weight:800;font-size:10px;letter-spacing:0;
  color:var(--txt-dim)}
.mfilter .fk.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.mfilter .fk.on .n{color:var(--on-accent);opacity:.75}
.mfilter .sp{flex:1}
.mfilter input.find{width:250px;max-width:100%;margin:0}

.dayh{display:flex;align-items:baseline;gap:10px;font-family:var(--ost);font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim);margin:18px 0 8px}
.feed .dayh:first-child{margin-top:2px}
.dayh span{font-family:var(--man);font-size:11px;letter-spacing:.04em;text-transform:none}

.mrow{display:grid;grid-template-columns:48px 70px minmax(0,1fr) auto;align-items:center;gap:12px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid transparent;
  border-radius:var(--r);padding:9px 14px;text-decoration:none;color:var(--txt);font-size:13px}
.mrow + .mrow{margin-top:4px}
.mrow:hover{background:var(--panel-3);border-left-color:var(--accent)}
.mrow.live{border-left-color:var(--live)}
.mrow .tm{font-family:var(--ost);letter-spacing:.06em;color:var(--txt-dim)}
.mrow .mode{font-family:var(--man);font-weight:800;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 6px;border-radius:3px;white-space:nowrap;text-align:center}
.mrow .mode.tournament{background:var(--accent-bg);color:var(--accent-hi)}
.mrow .mode.custom{background:rgba(31,157,90,.16);color:var(--win-t)}
.mrow .mode.rush{background:rgba(181,101,240,.16);color:#d6a8ff}
.mrow .body{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.mrow .vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  gap:10px;flex:0 1 460px;min-width:0}
.mrow .vs .a,.mrow .vs .b{display:flex;align-items:center;gap:8px;min-width:0}
.mrow .vs .a{justify-content:flex-end}
.mrow .vs b{font-family:var(--ost);font-weight:400;font-size:16px;letter-spacing:.04em;
  text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .vs b.lost{color:var(--txt-dim)}
.mrow .fsc{font-family:var(--ost);font-size:17px;letter-spacing:.06em;padding:1px 10px;
  border:1px solid var(--line);border-radius:3px;min-width:62px;text-align:center;
  background:var(--bg-top);white-space:nowrap}
.mrow.live .fsc{border-color:var(--live)}
.mrow .one{font-family:var(--ost);font-size:16px;letter-spacing:.05em;text-transform:uppercase}
.mrow .dim{color:var(--txt-dim);font-size:12px}
.mrow .on{display:inline-flex;align-items:center;gap:6px;color:var(--loss-t);font-size:12px}
/* Недоигранная серия, которая сейчас не идёт, — серой пометкой, без
   мигающей точки: «идёт» у брошенной серии было бы неправдой. */
.mrow .undone{font-family:var(--man);font-weight:800;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-dim);border:1px solid var(--line);border-radius:3px;
  padding:2px 6px;white-space:nowrap}
.mrow .mmaps{display:flex;gap:6px;flex-wrap:wrap}
.mrow .mp{font-size:11px;color:var(--txt-dim);background:var(--panel-2);border-radius:3px;
  padding:2px 7px;white-space:nowrap}
.mrow .mp b{font-weight:800;color:var(--win-t)}
.mrow .ev{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;
  color:var(--txt-dim);white-space:nowrap;text-align:right}
.mrow .ev b{color:var(--txt);font-weight:600}
.ldot{width:8px;height:8px;border-radius:50%;background:var(--live);flex:none;display:inline-block;
  box-shadow:0 0 0 3px rgba(227,64,44,.25);animation:lpulse 1.6s ease-in-out infinite}
@keyframes lpulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.ldot{animation:none}}
.feedmore{margin-top:14px}

.livebars{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.livebar{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--live);border-radius:var(--r);padding:10px 14px;font-size:13px;
  text-decoration:none;color:var(--txt)}
.livebar:hover{background:var(--panel-3)}
.livebar .lt{font-family:var(--man);font-weight:800;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--loss-t)}
.livebar b{font-family:var(--ost);font-weight:400;font-size:17px;letter-spacing:.05em;
  text-transform:uppercase}
.livebar .sc{font-family:var(--ost);font-size:18px}
.livebar .sc .ct{color:var(--ct)}
.livebar .sc .tt{color:var(--t)}
.livebar .dim{color:var(--txt-dim);font-size:12px}
.livebar .grow{flex:1}
.livebar .go{font-family:var(--man);font-weight:800;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-hi);white-space:nowrap}

@media(max-width:760px){
  .mfilter .sp{display:none}
  .mfilter input.find{width:100%;flex:1 1 100%}
  .mrow{grid-template-columns:auto minmax(0,1fr);gap:6px 10px;padding:9px 11px}
  .mrow .tm{grid-row:1;grid-column:1}
  .mrow .mode{grid-row:1;grid-column:2;justify-self:start}
  .mrow .body{grid-column:1/-1}
  .mrow .vs{flex:1 1 100%}
  .mrow .vs b{font-size:14px}
  .mrow .ev{grid-column:1/-1;align-items:flex-start;text-align:left;white-space:normal}
  .livebar{flex-wrap:wrap;gap:6px 10px}
  .livebar .dim{flex-basis:100%;order:5}
  .livebar .grow{display:none}
  .livebar .go{order:6}
}