/* ─────────────────────────── Язык Statline ───────────────────────────
   Дизайн-язык ОБЩИЙ с steam-дашбордом и лигой: те же нейтрали (почти-чёрный
   #08090a → #0f1011), Inter с теми же настройками начертания, hairline-границы,
   одинаковая шкала радиусов и теней. Отличается ТОЛЬКО акцент — у доты он красный
   (у steam индиго, у лиги золото). Так сервисы читаются как один портал.

   ТЕМЫ — три слоя: :root (тёмная база) → @media prefers-color-scheme:light
   (системная светлая) → body.theme-dark/.theme-light (ручной выбор, бьёт медиа-запрос
   в обе стороны). Источник решения — cookie `portal_theme` на .statline.site.

   ⚠️ Старые имена (--surface, --card, --line, --radius, --text) СОХРАНЕНЫ как алиасы:
   на них ссылаются сотни правил ниже, переименование сломало бы всё разом. */
:root{
  color-scheme: dark;
  /* нейтрали — как в steam */
  --bg:#08090a; --panel:#0f1011; --surface-2:#191a1b; --surface-3:#28282c;
  --ink:#f7f8f8; --ink-2:#d0d6e0; --muted:#8a8f98; --dim:#62666d;
  /* границы: три степени + сплошная, как в steam */
  --line:rgba(255,255,255,.08); --line-soft:rgba(255,255,255,.05);
  --line-solid:#23252a; --line-strong:rgba(255,255,255,.16);
  /* «подложки» для карточек, ховеров и активных состояний */
  --wash-0:rgba(255,255,255,.03); --wash-1:rgba(255,255,255,.05); --wash-2:rgba(255,255,255,.08);
  /* акцент сервиса + семантика (green/red те же значения, что у steam и лиги) */
  --accent:#e0563a; --accent-2:#ef6a4d; --accent-hi:#ff8064;
  --green:#10b981; --green-bg:rgba(16,185,129,.14);
  --red:#f23f43; --red-bg:rgba(242,63,67,.12);
  --radiant:#5ec06a; --dire:#e05c4a;
  /* шкалы */
  --r-sm:6px; --r:8px; --r-lg:12px; --r-pill:9999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.16);
  --shadow-card:0 1px 2px rgba(0,0,0,.16), 0 10px 30px -22px rgba(0,0,0,.55);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* алиасы под существующие правила */
  --surface:var(--panel); --card:var(--wash-0); --text:var(--ink); --radius:var(--r-lg);
}
/* ⚠️ Медиа-запроса на системную светлую тему тут СОЗНАТЕЛЬНО нет: у dota, как и у
   дашборда steam, тёмная тема — ОСНОВНАЯ (steam /app вообще не смотрит на
   prefers-color-scheme). Светлая доступна явным выбором — body.theme-light, который
   ставит переключатель, а решение переезжает между сервисами через cookie
   portal_theme. Раньше на светлой ОС дота открывалась светлой, а steam /app рядом
   оставался тёмным — из-за этого сервисы выглядели как разные продукты. */
body.theme-dark{
  color-scheme: dark;
  --bg:#08090a; --panel:#0f1011; --surface-2:#191a1b; --surface-3:#28282c;
  --ink:#f7f8f8; --ink-2:#d0d6e0; --muted:#8a8f98; --dim:#62666d;
  --line:rgba(255,255,255,.08); --line-soft:rgba(255,255,255,.05);
  --line-solid:#23252a; --line-strong:rgba(255,255,255,.16);
  --wash-0:rgba(255,255,255,.03); --wash-1:rgba(255,255,255,.05); --wash-2:rgba(255,255,255,.08);
  --accent:#e0563a; --accent-2:#ef6a4d; --accent-hi:#ff8064;
  --green:#10b981; --green-bg:rgba(16,185,129,.14);
  --red:#f23f43; --red-bg:rgba(242,63,67,.12);
  --radiant:#5ec06a; --dire:#e05c4a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.16);
  --shadow-card:0 1px 2px rgba(0,0,0,.16), 0 10px 30px -22px rgba(0,0,0,.55);
}
body.theme-light{
  color-scheme: light;
  --bg:#f2f3f5; --panel:#ffffff; --surface-2:#e9ebee; --surface-3:#dde0e5;
  --ink:#101215; --ink-2:#2a2f37; --muted:#667080; --dim:#98a0ab;
  --line:rgba(0,0,0,.12); --line-soft:rgba(0,0,0,.07);
  --line-solid:#d9dbdf; --line-strong:rgba(0,0,0,.22);
  --wash-0:rgba(0,0,0,.03); --wash-1:rgba(0,0,0,.05); --wash-2:rgba(0,0,0,.09);
  --accent:#c7442a; --accent-2:#b93c23; --accent-hi:#a3341d;
  --green:#0e9f6e; --green-bg:rgba(14,159,110,.12);
  --red:#e02424; --red-bg:rgba(224,36,36,.10);
  --radiant:#2f9d43; --dire:#c7442a;
  --shadow-sm:0 1px 2px rgba(19,50,120,.07);
  --shadow-card:0 1px 2px rgba(19,50,120,.07), 0 10px 30px -24px rgba(19,50,120,.28);
}
*{box-sizing:border-box}
/* Скроллбар — как в лиге: тонкий, в цвет границ */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
*{scrollbar-width:thin;scrollbar-color:var(--line) var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font-family:var(--font);
  /* те же настройки начертания Inter, что в steam — иначе цифры и «a» отличаются */
  font-feature-settings:"cv01","ss03";
  font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* портал-шапка (как в лиге и steam) */
.sl-portalbar{display:flex;align-items:center;gap:14px;height:44px;padding:0 20px;
  background:var(--panel);border-bottom:1px solid var(--line-soft);font-size:13px;
  position:sticky;top:0;z-index:20}
.sl-back{display:flex;align-items:center;gap:8px;font-weight:600}
.sl-back svg{width:16px;height:16px;color:var(--muted)}
.sl-back:hover svg{color:var(--accent)}
.sl-mark{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--text);color:var(--surface);font-weight:800;font-size:12px}
.sl-brand{display:flex;align-items:center;gap:7px}
.sl-svc{color:var(--muted);font-weight:500;padding-left:14px;border-left:1px solid var(--line)}
.sl-user-wrap{margin-left:auto;display:flex;align-items:center;gap:10px}
.theme-btn{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--wash-0);color:var(--muted);cursor:pointer;
  font-size:14px;line-height:1;padding:0;transition:color .15s,border-color .15s}
.theme-btn:hover{color:var(--accent);border-color:var(--accent)}
.sl-user{display:flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-user .dotu{flex:none;width:7px;height:7px;border-radius:50%;background:var(--green)}
.sl-login{padding:4px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600;color:var(--text)}
.sl-login:hover{border-color:var(--accent)}
.sl-logout{border:0;background:none;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;padding:2px 4px}
.sl-logout:hover{color:var(--accent)}
.fav-star{border:0;background:none;cursor:pointer;font-size:22px;line-height:1;color:var(--muted);padding:0 2px}
.fav-star.on{color:var(--accent)}
.fav-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-bottom:1px solid var(--line);cursor:pointer}
.fav-row:last-child{border-bottom:0}
.fav-row:hover{background:var(--card)}
.fav-row img{width:30px;height:30px;border-radius:7px;background:var(--card)}
.fav-row .rm{margin-left:auto;border:0;background:none;color:var(--muted);cursor:pointer;font-size:14px}
.fav-row .rm:hover{color:var(--red)}
.stratz-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.stratz-badge{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:5px;padding:1px 6px;margin-left:8px;vertical-align:middle}
.spark-wrap{margin-left:auto;min-width:220px}
.spark-wrap svg{display:block;width:100%;height:48px}
.match-row{cursor:pointer}
.match-row:hover{background:var(--card)}
/* Список матчей профиля: строки-карточки. Цветная полоса слева = итог матча,
   читается быстрее, чем слово «Победа/Поражение». */
/* тренды: столбики по часам/дням, «срез → винрейт», сводка средних.
   Цвет = винрейт, высота = число игр. Бакеты с малой выборкой серые (.thin) —
   не выдаём 2 матча со 100% за сильную сторону игрока. */
.tsum{margin-bottom:14px}
.tstreak{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid}
.tstreak.good{color:var(--green);border-color:color-mix(in srgb, var(--green) 45%, transparent)}
.tstreak.bad{color:var(--red);border-color:color-mix(in srgb, var(--red) 45%, transparent)}
.tblock{margin-top:16px}
.tblock:first-of-type{margin-top:0}
.tblock-h{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.tbars{display:flex;align-items:flex-end;gap:3px}
.tcol{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.tbar-wrap{width:100%;height:64px;display:flex;align-items:flex-end}
.tbar{display:block;width:100%;border-radius:2px 2px 0 0;background:var(--line)}
.tbar.good{background:var(--green)}
.tbar.mid{background:color-mix(in srgb, var(--muted) 55%, transparent)}
.tbar.bad{background:color-mix(in srgb, var(--red) 65%, transparent)}
.tbar.thin{background:var(--line)}
.tlab{font-size:9.5px;color:var(--muted);white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.tsplit{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 22px}
.trow{display:grid;grid-template-columns:minmax(90px,1fr) minmax(60px,1.4fr) 40px 62px;gap:8px;align-items:center;
  font-size:12.5px;padding:4px 0}
.tname{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmeter{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.tmeter i{display:block;height:100%;border-radius:3px;background:var(--muted)}
.tmeter.good i{background:var(--green)}
.tmeter.bad i{background:var(--red)}
.tmeter.thin i{background:var(--muted);opacity:.4}
.tval{font-weight:700;text-align:right}
.tsub{color:var(--muted);font-size:11px;text-align:right}
.tstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px}
.tstat{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.tstat-v{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.tstat-k{font-size:10.5px;color:var(--muted)}
svg.tspark{display:block;width:100%;height:44px}
svg.tspark polyline{fill:none;stroke:var(--accent);stroke-width:1.6;vector-effect:non-scaling-stroke}
/* про-сцена: живые игры, рейтинг команд, карточка команды */
.lv-head,.lv-row{display:grid;grid-template-columns:78px minmax(0,1fr) 72px 62px 74px;gap:10px;align-items:center}
.lv-head{padding:0 12px 7px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lv-head span:nth-child(n+3){text-align:right}
.lv-row{padding:7px 12px;border-bottom:1px solid var(--line);font-size:12.5px;cursor:pointer}
.lv-row:last-child{border-bottom:0}
.lv-row:hover{background:var(--card)}
.lv-badge{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:center;
  padding:2px 5px;border-radius:4px;border:1px solid var(--line);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-badge.lg{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
.lv-badge.win-b{color:var(--green);border-color:color-mix(in srgb, var(--green) 45%, transparent)}
.lv-badge.lose-b{color:var(--red);border-color:color-mix(in srgb, var(--red) 45%, transparent)}
.lv-teams{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-score,.lv-time,.lv-spec{text-align:right;font-variant-numeric:tabular-nums}
.lv-score{font-weight:700}
.lv-time,.lv-spec{color:var(--muted)}
.tm-head,.tm-row{display:grid;grid-template-columns:26px 28px minmax(0,1fr) 66px 72px 60px 92px;gap:10px;align-items:center}
.tm-head{padding:0 12px 7px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tm-head span:nth-child(n+4){text-align:right}
.tm-row{padding:6px 12px;border-bottom:1px solid var(--line);font-size:12.5px;cursor:pointer}
.tm-row:last-child{border-bottom:0}
.tm-row:hover{background:var(--card)}
.tm-n{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.tm-logo{width:28px;height:28px;object-fit:contain;border-radius:5px;display:block;background:var(--line)}
.tm-name{min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-tag{margin-left:6px;font-size:10.5px;font-weight:500;color:var(--muted)}
.tm-rating,.tm-wl,.tm-wr{text-align:right;font-variant-numeric:tabular-nums}
.tm-rating{font-weight:700}
.tm-wl{color:var(--muted)}
.tm-when{text-align:right;font-size:11px}
@media(max-width:820px){
  .lv-head,.lv-row{grid-template-columns:70px minmax(0,1fr) 62px}
  .lv-time,.lv-spec,.lv-head span:nth-child(4),.lv-head span:nth-child(5){display:none}
  .tm-head,.tm-row{grid-template-columns:22px 26px minmax(0,1fr) 58px 56px}
  .tm-wr,.tm-when,.tm-head span:nth-child(6),.tm-head span:nth-child(7){display:none}
}
/* мета героев: фильтры + таблица-список; страница героя */
.svc-nav{margin-left:14px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.svc-nav:hover{color:var(--accent)}
.mfilters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.mfilters select{background:var(--surface);color:var(--text);border:1px solid var(--line);
  border-radius:7px;padding:6px 9px;font:inherit;font-size:12.5px}
.mhead-h,.mrow-h{display:grid;grid-template-columns:40px minmax(0,1fr) 74px 84px 92px;gap:10px;align-items:center}
.mhead-h{padding:0 12px 7px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mhead-h span:nth-child(n+3){text-align:right}
.mrow-h{padding:6px 12px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer}
.mrow-h:last-child{border-bottom:0}
.mrow-h:hover{background:var(--card)}
.mh-img{width:40px;height:23px;object-fit:cover;border-radius:3px}
.mh-name{min-width:0;display:flex;flex-direction:column;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-roles{font-size:10.5px;font-weight:500;color:var(--muted);
  /* своё многоточие: у .mh-name оно есть, а роли — вложенный span и на узком
     экране вылезали из колонки (125px текста в 77px) */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-wr,.mh-pr,.mh-games{text-align:right;font-variant-numeric:tabular-nums}
.mh-wr{font-weight:700}
.mh-wr.good{color:var(--green)}
.mh-wr.bad{color:var(--red)}
.mh-wr.thin{color:var(--muted);font-weight:500}   /* мало данных — не выделяем цветом */
/* герой как ссылка: подчёркивание только на ховере, чтобы таблицы не рябили */
.hero-link{cursor:pointer}
span.hero-link:hover,.hero.hero-link:hover span{text-decoration:underline;text-underline-offset:2px;color:var(--accent)}
img.hero-link:hover{outline:1px solid var(--accent);outline-offset:1px}
.mh-pr,.mh-games{color:var(--muted)}
.mlist-h{max-height:none}
.hhead{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.hh-img{width:96px;height:54px;object-fit:cover;border-radius:8px;background:var(--line)}
.hh-name{font-size:20px;font-weight:700}
.trow.mu{cursor:pointer}
.trow.mu:hover{background:var(--card)}
.trow.mu .tname{display:flex;align-items:center;gap:7px;min-width:0}
.trow.mu .tname img{width:30px;height:17px;object-fit:cover;border-radius:3px;flex:none}
/* сравнение двух игроков: значение — метка — значение, лидер подсвечен */
.cmpinvite .cmpform{display:flex;gap:8px;flex-wrap:wrap}
.cmpform input{flex:1;min-width:170px;background:var(--surface);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:9px 12px;font:inherit;font-size:13.5px}
.cmpform input:focus{outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent);outline-offset:1px}
.cmpform button{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:9px 16px;
  font:inherit;font-weight:600;font-size:13.5px;cursor:pointer}
.cmpform button:disabled{opacity:.6;cursor:default}
.cmperr{color:var(--red);font-size:12px;margin-top:7px;min-height:1em}
.cmpwarn{font-size:12.5px;color:var(--muted);border:1px dashed var(--line);border-radius:8px;
  padding:9px 12px;margin-bottom:16px}
.cmpheads{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-bottom:18px}
.cmphead{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;min-width:0}
.cmphead img{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--line)}
a.cmpname{font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:2px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmprank{font-size:11.5px;color:var(--muted)}
.cmpvs{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cmprow{display:grid;grid-template-columns:1fr minmax(120px,auto) 1fr;gap:12px;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.cmprow:last-child{border-bottom:0}
.cmpv{font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted)}
.cmpv:first-child{text-align:right}
.cmpv:last-child{text-align:left}
.cmpv.lead{color:var(--text);font-weight:800}
.cmpv.lead::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--green);margin-left:6px;vertical-align:middle}
.cmpk{text-align:center;font-size:11.5px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:7px}
.cmpk img{width:32px;height:18px;object-fit:cover;border-radius:3px}
.cmprow.hero .cmpv .tsub{margin-left:4px}
/* драфт: пики и баны обеих сторон; сменённый пик и бан гасим, чтобы состав читался */
.draft{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.dside{display:flex;flex-direction:column;gap:7px}
.dlabel{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.dlabel.rad{color:var(--radiant)}
.dlabel.dir{color:var(--dire)}
.drow{display:flex;align-items:center;gap:9px}
.dcap{font-size:11px;color:var(--muted);min-width:34px}
.dchips{display:flex;flex-wrap:wrap;gap:4px}
.dchip{display:block;width:42px;height:24px;border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.dchip img{width:100%;height:100%;object-fit:cover;display:block}
.dchip.ban{opacity:.32;filter:grayscale(1)}
.dchip.swapped{opacity:.42;filter:grayscale(.7)}
/* перцентили: цифра + полоса, цвет по полосе значений */
.bmrow{display:grid;grid-template-columns:minmax(150px,1.3fr) repeat(7,minmax(58px,1fr));gap:8px;
  align-items:center;padding:7px 16px;border-bottom:1px solid var(--line);font-size:12.5px}
.bmrow:last-child{border-bottom:0}
.bmhead{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.bmrow.rad{box-shadow:inset 3px 0 0 var(--radiant)}
.bmrow.dir{box-shadow:inset 3px 0 0 var(--dire)}
.bmp{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bmp img{width:32px;height:18px;object-fit:cover;border-radius:3px;flex:none}
.bmc{position:relative;display:block;height:18px;border-radius:3px;background:var(--line);overflow:hidden}
.bmc i{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:3px}
.bmc b{position:relative;display:block;text-align:center;line-height:18px;font-size:11px;
  font-weight:700;font-variant-numeric:tabular-nums}
.bmc.t1 i{background:color-mix(in srgb, var(--red) 55%, transparent)}
.bmc.t2 i{background:color-mix(in srgb, var(--muted) 45%, transparent)}
.bmc.t3 i{background:color-mix(in srgb, var(--green) 45%, transparent)}
.bmc.t4 i{background:color-mix(in srgb, var(--green) 80%, transparent)}
.hint{margin-left:10px;font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
/* график преимущества по золоту */
svg.adv{display:block;width:100%;height:140px}
.advline{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.advline.rad{stroke:var(--radiant)}
.advline.dir{stroke:var(--dire)}
.advfill{stroke:none;opacity:.18}
.advfill.rad{fill:var(--radiant)}
.advfill.dir{fill:var(--dire)}
.advzero{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.bsep{color:var(--muted);margin:0 6px}
@media(max-width:1000px){ .bmrow{grid-template-columns:minmax(120px,1fr) repeat(7,44px)} }
.mlist{display:flex;flex-direction:column;gap:6px}
.mrow{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;align-items:center;gap:12px;
  padding:8px 12px;border:1px solid var(--line);border-left-width:3px;border-radius:7px;background:transparent}
.mrow.w{border-left-color:var(--green)}
.mrow.l{border-left-color:var(--red)}
.mrow-hero{width:36px;height:20px;object-fit:cover;border-radius:3px;flex:none}
.mrow-main{display:flex;flex-direction:column;min-width:0}
.mrow-hn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow-res{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.mrow-kda,.mrow-when{display:flex;flex-direction:column;align-items:flex-end;line-height:1.35}
.mrow-sub{font-size:11px;color:var(--muted)}
.mp-name{border-bottom:1px dashed transparent}
.mp-name:hover{border-bottom-color:var(--accent)}
.mback{display:inline-block;margin-bottom:12px;color:var(--muted);font-weight:600}
.mback:hover{color:var(--accent)}
.team-won{color:var(--green);font-weight:700}
.team-lost{color:var(--red);font-weight:700}
.mscroll{overflow-x:auto}
.items{display:flex;gap:3px;align-items:center}
.itm{width:30px;height:22px;border-radius:3px;background:var(--card);object-fit:cover;flex:none}
/* Пустой слот — именно ПУСТОЙ слот, а не «сломанная картинка»: раньше это был
   заметный серый прямоугольник и его читали как неудавшуюся загрузку. Теперь —
   едва различимая рамка, держащая сетку. */
.itm.empty{background:transparent;border:1px dashed var(--line);opacity:.5}
.itm.neu{width:22px;height:22px;border-radius:50%;margin-left:6px}

/* ── страница матча ─────────────────────────────────────────────── */
.mhead{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px}
.mscore{display:flex;align-items:center;gap:12px;font-variant-numeric:tabular-nums}
.mscore b{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1}
.mscore .rad{color:var(--radiant)}
.mscore .dir{color:var(--dire)}
.mscore .sep{color:var(--muted);font-size:18px}
.mmeta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12.5px}
.mmeta b{color:var(--text);font-weight:600}
.mwin{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.mwin.rad{color:var(--radiant);border:1px solid var(--radiant);background:color-mix(in srgb, var(--radiant) 12%, transparent)}
.mwin.dir{color:var(--dire);border:1px solid var(--dire);background:color-mix(in srgb, var(--dire) 12%, transparent)}

.team{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:14px;background:var(--surface)}
.team-h{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);font-weight:750;font-size:14px}
.team-h .tag{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.team-h .kills{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700}
.team.rad{border-left:3px solid var(--radiant)}
.team.dir{border-left:3px solid var(--dire)}
.team.rad .team-h{color:var(--radiant)}
.team.dir .team-h{color:var(--dire)}
.team.rad .tag{background:color-mix(in srgb, var(--radiant) 14%, transparent);color:var(--radiant)}
.team.dir .tag{background:color-mix(in srgb, var(--dire) 14%, transparent);color:var(--dire)}

.prow{display:grid;grid-template-columns:minmax(150px,1.4fr) 74px minmax(96px,1fr) 78px 62px 56px 34px minmax(226px,auto);gap:10px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--line);font-size:13px}
.prow:last-child{border-bottom:0}
.prow:hover{background:var(--card)}
.prow.me{background:color-mix(in srgb, var(--accent) 8%, transparent);box-shadow:inset 3px 0 0 var(--accent)}
.phead{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;background:var(--card)}
.phead:hover{background:var(--card)}
.pl-hero{display:flex;align-items:center;gap:9px;min-width:0}
.pl-hero img{width:38px;height:22px;border-radius:3px;background:var(--card);object-fit:cover;flex:none}
.pl-names{min-width:0;line-height:1.25}
.pl-nick{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.pl-heroname{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
/* Кликабельный игрок должен ВЫГЛЯДЕТЬ кликабельным: раньше был прозрачный
   dashed-бордер, то есть визуально обычный текст, и по нему не догадывались нажать. */
a.pl-nick{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--accent) 40%, transparent);text-underline-offset:2px;cursor:pointer}
a.pl-nick:hover{text-decoration-color:var(--accent)}
.pl-nick.anon{color:var(--muted);font-weight:500;font-style:italic}
.nw{display:flex;flex-direction:column;gap:3px;font-variant-numeric:tabular-nums}
.nw-bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.nw-bar i{display:block;height:100%;border-radius:2px}
.team.rad .nw-bar i{background:var(--radiant)}
.team.dir .nw-bar i{background:var(--dire)}
@media(max-width:1000px){
  .prow{grid-template-columns:minmax(130px,1.4fr) 70px 90px 70px;row-gap:6px}
  .prow .col-lh,.prow .col-lvl,.prow .col-dmg{display:none}
  .prow .items{grid-column:1/-1}
  .phead .items-h{display:none}
}

/* шапка сервиса + поиск */
header.svc{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
header.svc h1{margin:0;font-size:17px;font-weight:750;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
header.svc h1 .dot{width:9px;height:9px;border-radius:3px;background:var(--accent)}
.search{display:flex;gap:8px;flex:1;min-width:280px;max-width:520px}
.search input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 13px;color:var(--text);font:inherit;outline:none}
.search input:focus{border-color:var(--accent)}
.search button{border:0;background:var(--accent);color:#fff;font:inherit;font-weight:650;padding:9px 18px;border-radius:9px;cursor:pointer}
.search button:disabled{opacity:.6;cursor:default}

.muted{color:var(--muted)}
/* карточка: подложка + двухслойная тень, как в steam/.card и league/.card —
   именно тень отличала «плоскую» доту от остальных сервисов */
.card{background:var(--wash-0);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;margin-bottom:16px;box-shadow:var(--shadow-card)}
/* заголовок секции — как .section-h в steam и .section-title в лиге: 14px,
   без uppercase, с 3px акцентной полоской слева (она делает длинные страницы
   сканируемыми). Было: 12px uppercase muted — из-за этого дота выглядела
   «технической», а не как остальной портал. */
.section-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:14px;font-weight:590;letter-spacing:-.01em;color:var(--ink);margin:0 0 12px}
.section-title::before{content:"";flex:none;display:inline-block;width:3px;height:.82em;
  background:var(--accent);border-radius:2px;opacity:.85}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* профиль */
.profile{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px;background:var(--surface);border-bottom:1px solid var(--line);margin:0 -20px 18px}
.profile img.av{width:64px;height:64px;border-radius:12px;background:var(--card)}
.profile .nm{font-size:20px;font-weight:750;letter-spacing:-.02em}
.profile .sub{color:var(--muted);font-size:12.5px}
.kpis{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.kpi b{display:block;font-size:19px;font-weight:750;font-variant-numeric:tabular-nums}
.kpi span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.rank-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:650;font-size:13px}
.rank-badge .m{width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* таблицы */
/* таблицы: те же метрики, что в лиге (th 11px/.05em, td 13px) + ховер строки
   подложкой — раньше ховера не было вовсе, строки казались статичными */
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--wash-0)}
tbody tr:last-child td{border-bottom:0}
.win{color:var(--green);font-weight:650}
.loss{color:var(--red);font-weight:650}
.hero{display:flex;align-items:center;gap:8px}
.hero img{width:34px;height:19px;border-radius:3px;background:var(--card);object-fit:cover}
.nums{font-variant-numeric:tabular-nums}
.bar{display:inline-block;width:52px;height:5px;border-radius:3px;background:var(--line);vertical-align:middle;margin-left:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.empty{padding:28px 8px;text-align:center;color:var(--muted)}
.err{color:var(--red);padding:12px 0}
.sug{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.sug button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 10px;color:var(--text);font:inherit;cursor:pointer}
.sug button:hover{border-color:var(--accent)}
.sug img{width:28px;height:28px;border-radius:6px}
.skel{height:12px;border-radius:4px;background:linear-gradient(90deg,var(--card),var(--line),var(--card));background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Узкий экран: то, что писалось вслепую и подтвердилось замером на 375px ── */
@media(max-width:480px){
  /* Строка матча: 4 колонки в 375px не помещались — «ПОРАЖЕНИЕ» вылезало из своей
     колонки поверх соседней (77px текста в 70px). Переносим длительность и «когда»
     на вторую строку: ничего не теряем и всё читается. */
  .mrow{grid-template-columns:36px minmax(0,1fr) auto;gap:8px;row-gap:2px;padding:8px 10px}
  .mrow-when{grid-column:2 / -1;flex-direction:row;align-items:baseline;gap:10px;
    justify-content:flex-start}
  .mrow-when .mrow-sub{order:2}
}
@media(max-width:600px){
  /* Часы суток: 24 колонки по ~10px, подпись «12:00» шириной 18px обрезалась до
     «12:» и выглядела мусором. Показываем каждую 6-ю и разрешаем ей выйти за
     пределы своей колонки — соседние подписи всё равно скрыты. */
  .tbars.sparse .tlab{visibility:hidden}
  .tbars.sparse .tcol:nth-child(6n+1) .tlab{visibility:visible;overflow:visible;position:relative;z-index:1}
}
@media(max-width:600px){
  /* Таблицы на 4-5 колонок (герои, напарники, STRATZ hero-perf, про-матчи) на 375px
     не влезают: замер показал 324px содержимого в 301px контейнера, причём БЕЗ
     прокрутки — часть колонок просто обрезалась. Делаем сами таблицы прокручиваемыми:
     display:block превращает таблицу в блок-контейнер, внутренняя раскладка строк
     сохраняется. */
  .card table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:600px){
  /* Мета героев: 5 колонок (290px + отступы) не влезали в 301px и тянули всю
     страницу к горизонтальной прокрутке. Убираем «долю пиков» — производная от
     числа матчей, которое остаётся рядом. */
  .mhead-h,.mrow-h{grid-template-columns:36px minmax(0,1fr) 62px 78px;gap:8px}
  .mh-pr,.mhead-h span:nth-child(4){display:none}
}
@media(max-width:700px){
  /* Скорборд матча: правило для ≤1000px давало строку 390px + отступы = 406px при
     контейнере 331px. Прокрутка у .mscroll есть, но сама строка НЕ расширялась —
     справа оказалась бы пустота вместо колонок. Поджимаем под 375px: 292px + 30px
     отступов = 322px. Предметы по-прежнему отдельной строкой во всю ширину. */
  /* padding:9px 16px съедает 32px — учитываем его: колонки 188px + отступы 24px =
     212px при доступных 311px, остаток забирает первая колонка. */
  .prow{grid-template-columns:minmax(70px,1fr) 54px 78px 56px;gap:8px;padding:9px 10px}
  .prow .nums{font-size:12px}
  .pl-heroname{font-size:10.5px}
}