/* Стиль вдохновлён скинами линейки PrintStream (CS2): графит и белый, CMYK-полосы, метки приводки, полутоновая сетка, моноширинные подписи */
:root {
  --bg: #0b0b0d; --panel: rgba(20,20,23,.93); --panel2: #1c1c21; --line: #2c2c33;
  --text: #f3f3f5; --muted: #8e8e99; --white: #ffffff;
  --cyan: #19c2ff; --magenta: #ff3d9a; --yellow: #ffd400;
  --win: #3ecf8e; --loss: #ff4d6a;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, "Courier New", monospace;
  --r: 6px;
  --cmyk: linear-gradient(90deg, var(--cyan) 0 25%, var(--magenta) 25% 50%, var(--yellow) 50% 75%, #fff 75% 100%);
}
* { box-sizing: border-box; }
html { background: var(--bg); overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
body {
  margin: 0; color: var(--text); min-height: 100vh;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.4px) 0 0 / 14px 14px,
    radial-gradient(900px 420px at 85% -10%, rgba(25,194,255,.08), transparent 60%),
    radial-gradient(800px 400px at 0% 10%, rgba(255,61,154,.06), transparent 60%),
    var(--bg);
}
code { font-family: var(--mono); background: var(--panel2); padding: 1px 6px; border-radius: 4px; color: #fff; font-size: .9em; }
a { color: var(--cyan); }
.muted { color: var(--muted); } .small { font-size: 12px; }

/* фоновые цитаты */
#quotes { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
#quotes .q { position: absolute; color: #fff; font-style: italic; font-family: Georgia, "Times New Roman", serif; line-height: 1.25; transform-origin: center; }
#quotes .q small { display: block; margin-top: 6px; font: normal 600 .62em var(--mono); letter-spacing: 1.5px; text-transform: uppercase; }
body > header, #status, main, footer { position: relative; z-index: 1; }

/* шапка */
.top {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  padding: 10px clamp(14px, 4vw, 40px); border-bottom: 1px solid var(--line);
  background: rgba(11,11,13,.96); position: sticky; top: 0; z-index: 20;
}
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cmyk); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-size: 20px; letter-spacing: .3px; }
.brand b { font-weight: 800; letter-spacing: 1px; }
.brand .logo { display: block; border-radius: 8px; transition: transform .2s; }
.brand:hover .logo { transform: scale(1.08); }
input, select, button {
  font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line);
  border-radius: 5px; padding: 8px 12px; outline: none;
}
input:focus, select:focus { border-color: #fff; }
button { cursor: pointer; transition: .15s; }
button.primary {
  background: #fff; color: #000; border-color: #fff; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px; font-size: 13px;
}
button.primary:hover { box-shadow: 0 2px 0 var(--cyan), 0 4px 0 var(--magenta), 0 6px 0 var(--yellow); transform: translateY(-2px); }
button.ghost { font-family: var(--mono); font-size: 13px; letter-spacing: .5px; }
button.ghost:hover { border-color: #fff; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: var(--muted); border-radius: 5px; }
.icon-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn.done { color: var(--win); }

#status { max-width: 1200px; margin: 12px auto 0; padding: 0 clamp(14px, 4vw, 40px); }
#status .msg { padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#status .err { border-color: var(--loss); color: #ffb4be; }
#status .warn { border-color: var(--yellow); color: #fff0a8; }
#status .load { color: var(--muted); }
#status button { padding: 4px 10px; font-size: 12px; }

main { max-width: 1200px; margin: 0 auto; padding: 18px clamp(14px, 4vw, 40px) 40px; }
#app.busy { opacity: .55; transition: opacity .2s; pointer-events: none; }
.hero { text-align: center; padding: 80px 10px; }
.hero h1 { font-size: clamp(26px, 5vw, 46px); margin: 0 0 14px; letter-spacing: -.5px; }
.hero h1::after { content: ""; display: block; width: 160px; height: 4px; margin: 16px auto 0; background: var(--cmyk); }
.hero p { max-width: 660px; margin: 8px auto; color: var(--muted); }
footer { text-align: center; color: var(--muted); font-size: 12px; padding: 24px 14px 40px; font-family: var(--mono); }

/* карточки */
.card, .kpi, .rank { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.card::before, .kpi::before, .rank::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--cmyk); border-radius: var(--r) var(--r) 0 0; }
.card { padding: 18px 16px 16px; min-width: 0; }
.card h3 { margin: 0 0 12px; font: 600 12px var(--mono); color: #fff; text-transform: uppercase; letter-spacing: 1.2px; }
.card h3 small { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; }

/* профиль */
.profile { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 18px; }
.avatar { position: relative; }
.avatar img { width: 92px; height: 92px; border-radius: 8px; border: 2px solid #fff; display: block; background: var(--panel2); }
.avatar span { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); background: #fff; color: #000; font: 700 12px var(--mono); padding: 1px 9px; border-radius: 3px; }
/* блок с ником занимает всё свободное место, но не раздувается от длинных плашек (например, «В игре · …·8:40»):
   они переносятся внутри него, а карточки рангов остаются справа в той же строке */
.who { flex: 1 1 260px; min-width: 0; }
.who h2 { margin: 0; font-size: 28px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.who h2 small { color: var(--muted); font-weight: 400; font-size: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { background: var(--panel2); border: 1px solid var(--line); padding: 3px 10px; border-radius: 4px; font: 12px var(--mono); color: var(--muted); }
.chip.live i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 7px; background: #6b6b75; }
.chip.live.on { color: #bff5db; border-color: rgba(62,207,142,.5); }
.chip.live.on i { background: var(--win); box-shadow: 0 0 8px var(--win); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .45; } }
.ranks { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.rank { border-left: 4px solid var(--tc, #fff); padding: 12px 16px 10px; min-width: 200px; }
.rank .q { font: 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.rank .t { font-size: 20px; font-weight: 700; color: var(--tc, #fff); }
.rank .s { font-size: 13px; color: var(--muted); }
.rank.none { border-left-color: var(--line); }
.rank.none .t { color: var(--muted); font-size: 18px; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { padding: 16px 16px 12px; }
.kpi .l { font: 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.kpi .v { font-size: 26px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .sub { color: var(--muted); font-size: 12px; }
.win { color: var(--win); } .loss { color: var(--loss); } .acc { color: var(--cyan); }

/* сетки и графики */
.grid { display: grid; gap: 14px; margin-bottom: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.g12 { grid-template-columns: minmax(280px, 1fr) minmax(340px, 2fr); }
.chart { position: relative; height: 250px; }
@media (max-width: 760px) { .g12 { grid-template-columns: minmax(0, 1fr); } }

/* таблицы */
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th { text-align: right; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .8px; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid rgba(44,44,51,.6); white-space: nowrap; text-align: right; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl tr:last-child td { border-bottom: 0; }
.scroll { overflow-x: auto; }
.champ { display: flex; align-items: center; gap: 10px; }
.champ img { width: 34px; height: 34px; border-radius: 6px; background: var(--panel2); }
.bar { height: 5px; background: var(--loss); border-radius: 3px; overflow: hidden; min-width: 70px; margin: 3px 0 0 auto; }
.bar i { display: block; height: 100%; background: var(--win); }

/* мастерство */
.mastery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 10px 28px; }
.m-row { display: flex; align-items: center; gap: 10px; }
.m-row img { width: 40px; height: 40px; border-radius: 6px; border: 2px solid var(--magenta); }
.m-row .n { flex: 1; min-width: 0; }
.m-row .pts { font-variant-numeric: tabular-nums; text-align: right; min-width: 74px; }
.m-row .lvl { color: var(--magenta); font: 700 13px var(--mono); margin-right: 8px; }
.m-row .bar { background: var(--panel2); margin: 4px 0 0; }
.m-row .bar i { background: var(--magenta); }

/* тепловая карта */
.heat { display: grid; grid-template-columns: 28px repeat(24, minmax(0, 1fr)); gap: 3px; font: 10px var(--mono); color: var(--muted); }
.heat .c { aspect-ratio: 1; border-radius: 3px; background: var(--cyan); min-width: 0; }
.heat .c.has { cursor: default; }
.heat .h { text-align: center; min-width: 0; overflow: visible; white-space: nowrap; }
.heat .d { display: flex; align-items: center; }

/* рекорды */
.records { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; }
.rec { display: flex; gap: 10px; align-items: center; background: var(--panel2); border-radius: 6px; padding: 10px; }
.rec img { width: 44px; height: 44px; border-radius: 6px; }
.rec .l { font: 11px var(--mono); color: var(--muted); text-transform: uppercase; }
.rec .v { font-size: 18px; font-weight: 700; }
.rec .s { font-size: 12px; color: var(--muted); }

/* история матчей */
.mh-card { min-height: 430px; }
.mh-scroll { overflow-x: auto; }
/* на ПК колонки подстраиваются под ширину окна (fr), поэтому горизонтальной прокрутки нет;
   она остаётся только на совсем узких окнах (min-width) и на телефоне (см. @media ниже) */
.mh { min-width: 920px; --cols: 4px 74px 52px minmax(118px, 1.1fr) 128px minmax(56px, .6fr) minmax(62px, .7fr) minmax(70px, .8fr) minmax(68px, .8fr) 84px minmax(120px, 1.5fr); }
.mhead, .match { display: grid; grid-template-columns: var(--cols); column-gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.mhead { padding: 0 0 8px; border-bottom: 1px solid var(--line); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.mhead > *, .match > .r { text-align: right; }
.mhead > :nth-child(2), .mhead > :nth-child(3) { text-align: left; }
.match { padding: 10px 0; border-bottom: 1px solid rgba(44,44,51,.6); }
.match:last-child { border-bottom: 0; }
.match .stripe { align-self: stretch; border-radius: 2px; }
.match.w .stripe { background: var(--win); } .match.l .stripe { background: var(--loss); }
.match .hero-c { display: flex; flex-direction: column; align-items: flex-start; }
.match .ci { position: relative; }
.match .ci img { width: 48px; height: 48px; border-radius: 6px; display: block; }
.match .ci b { position: absolute; right: -4px; bottom: -4px; font: 10px var(--mono); background: #000; border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; }
.ach { margin-top: 7px; font: 800 9px/1 var(--mono); letter-spacing: .6px; padding: 3px 5px; border-radius: 3px; color: #000; white-space: nowrap; }
.ach.double { background: var(--cyan); } .ach.triple { background: var(--yellow); } .ach.quad { background: var(--magenta); }
.ach.penta { background: var(--cmyk); background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow)); }
.match .big { font-size: 16px; font-weight: 700; } .match .cap { font-size: 12px; color: var(--muted); white-space: nowrap; }
.teams { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.trow { display: flex; gap: 2px; }
.pl { position: relative; width: 24px; height: 24px; border-radius: 4px; overflow: hidden; outline: 1px solid var(--tc); outline-offset: -1px; background: var(--panel2); cursor: pointer; }
.pl.red { --tc: rgba(255,77,106,.9); } .pl.blue { --tc: rgba(25,194,255,.9); }
.pl img { width: 100%; height: 100%; display: block; }
.pl.me { outline: 2px solid #fff; }
.pl:hover { filter: brightness(1.25); outline-width: 2px; }
.pl.nolink { cursor: default; }
.items { display: grid; grid-template-columns: repeat(3, 26px); gap: 3px; justify-content: end; }
.it { width: 26px; height: 26px; border-radius: 4px; background: var(--panel2); overflow: hidden; cursor: help; }
.it img { width: 100%; height: 100%; display: block; }
.match .res b { font-size: 15px; } .match .res div { font-size: 12px; color: var(--muted); }
.more { display: block; margin: 12px auto 0; }
.empty { text-align: center; color: var(--muted); padding: 40px; }

/* подсказка */
#tip {
  position: fixed; z-index: 100; display: none; pointer-events: none; max-width: 330px;
  background: #101013; border: 1px solid #44444d; border-radius: 6px; padding: 12px 14px 10px;
  font-size: 13px; line-height: 1.4; box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
#tip::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--cmyk); border-radius: 6px 6px 0 0; }
#tip .th { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
#tip .th img { width: 36px; height: 36px; border-radius: 5px; }
#tip .th b { display: block; font-size: 14px; } #tip .th span { color: var(--yellow); font: 12px var(--mono); }
#tip .pt { color: var(--muted); font-style: italic; margin-bottom: 4px; }
#tip .sm { color: var(--muted); font: 12px var(--mono); }
.d-maintext, .d-stats, .d-li { display: block; }
.d-stats { margin-bottom: 6px; }
.d-attention { color: #ffd966; font-weight: 700; }
.d-passive, .d-active, .d-unique { color: #ff9d4d; font-weight: 600; }
.d-rules, .d-flavortext { display: block; color: #9a9aa5; font-style: italic; margin-top: 6px; }
.d-scalead { color: #f2994a; } .d-scaleap { color: #7ec8ff; } .d-scalehealth { color: #5fd68c; }
.d-scalemana { color: #6aa8ff; } .d-scalearmor { color: #f2c94c; } .d-scalemr { color: #b794f4; }
.d-buffedstat { color: var(--win); } .d-nerfedstat { color: var(--loss); }
.d-status { color: #ffd966; } .d-speed { color: #8cf; } .d-healing { color: #5fd68c; }

/* ---------- мобильная версия ---------- */
@media (max-width: 760px) {
  /* история матчей на телефоне — прежняя широкая сетка с прокруткой вбок */
  .mh { min-width: 1108px; --cols: 4px 74px 52px 132px 128px 78px 80px 96px 96px 90px minmax(150px, 1fr); }
  .mhead, .match { column-gap: 12px; }
  /* шапка не липнет к верху: в несколько рядов она занимала бы четверть экрана */
  .top { position: relative; flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 14px 14px; }
  /* 16px — чтобы iOS не увеличивал страницу при фокусе в поле (из-за этого страницу потом можно «тянуть» вбок) */
  input, select { font-size: 16px; }
  /* ранги — по одной карточке на всю ширину */
  .ranks { width: 100%; margin-left: 0; }
  .rank { flex: 1 1 100%; min-width: 0; }
  .heat { gap: 2px; grid-template-columns: 24px repeat(24, minmax(0, 1fr)); }
  .heat .h { font-size: 8px; }
}

/* ---------- подробный матч ---------- */
.mh-hint { margin-left: 10px; font: 400 11px var(--mono); color: var(--muted); text-transform: none; letter-spacing: 0; }
.match { cursor: pointer; outline-offset: -2px; transition: background .12s; }
.match:hover, .match.open { background: rgba(255,255,255,.035); }
.match:focus-visible { outline: 2px solid var(--cyan); }
.mdet { padding: 10px 0 14px 16px; border-bottom: 1px solid rgba(44,44,51,.6); display: flex; flex-direction: column; gap: 12px; }
.dteam { background: var(--panel2); border-radius: var(--r); border-left: 3px solid var(--tc); padding: 8px 12px 6px; }
.dteam.red { --tc: var(--loss); } .dteam.blue { --tc: var(--cyan); }
.dth { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding-bottom: 6px; font-size: 13px; }
.dth .side { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .8px; color: var(--tc); }
.dth .tt { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.dth .tt b { color: var(--text); }
.objs { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.ob { font-size: 12px; background: rgba(255,255,255,.06); border-radius: 4px; padding: 2px 7px; color: var(--muted); white-space: nowrap; }
.ob b { color: var(--text); margin-left: 3px; } .ob.zero { opacity: .55; }
.dt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dt th { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .8px; color: var(--muted); text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.dt th:first-child { text-align: left; }
.dt td { padding: 5px 8px; border-bottom: 1px solid rgba(44,44,51,.5); vertical-align: middle; }
.dt tr:last-child td { border-bottom: 0; }
.dt tr.me td { background: rgba(255,255,255,.05); }
.dt td.nm { text-align: right; white-space: nowrap; }
.dt td b { font-weight: 700; } .dt small { display: block; font-size: 11px; color: var(--muted); }
.dn { display: flex; align-items: center; gap: 8px; min-width: 190px; }
.dn .pl { width: 32px; height: 32px; flex: none; }
.dn .lv { font: 10px var(--mono); color: var(--muted); width: 14px; text-align: center; flex: none; margin-left: -4px; }
.dn .dl { min-width: 0; }
.dp { font-weight: 600; cursor: pointer; } .dp:hover { text-decoration: underline; } .dp.nolink { cursor: default; color: var(--muted); font-weight: 400; text-decoration: none; }
.dmg { position: relative; min-width: 96px; }
.dmg .bar { display: block; height: 3px; border-radius: 2px; margin: 3px 0 0 auto; background: var(--tc, var(--cyan)); opacity: .85; }
.dmg .bar.red { --tc: var(--loss); } .dmg .bar.blue { --tc: var(--cyan); }
.dit { display: inline-flex; gap: 3px; align-items: center; }
.dit .it, .dit .slot { width: 26px; height: 26px; border-radius: 4px; background: var(--bg); overflow: hidden; flex: none; }
.dit .slot { border: 1px dashed var(--line); box-sizing: border-box; }
.dit .sep { width: 6px; flex: none; }
.dit .it:last-child { border-radius: 50%; }
.dit .slot:last-child { border-radius: 50%; }

/* руны и заклинания призывателя в строке истории */
.rn { display: grid; grid-template-columns: repeat(2, 24px); gap: 2px; justify-content: start; }
.rn .sp, .rn .ru, .rn .slot { display: block; width: 24px; height: 24px; border-radius: 4px; background: var(--panel2); overflow: hidden; cursor: help; box-sizing: border-box; }
.rn img { width: 100%; height: 100%; display: block; }
.rn .ru { border-radius: 50%; background: #000; }
.rn .ru.sub img { padding: 4px; }
.rn .slot { background: none; border: 1px dashed var(--line); cursor: default; }

/* период / патч, догрузка матчей */
.loadbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 8px 14px; margin-bottom: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); font: 12px var(--mono); color: var(--muted); }
.loadbar b { color: #fff; }
.loadbar button { padding: 5px 12px; font-size: 12px; }

/* союзники и соперники */
.chead { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.chead h3 { margin: 0; }
.flts { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.flt { display: inline-flex; align-items: center; gap: 6px; font: 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.flt select { padding: 3px 8px; font-size: 12px; max-width: 160px; text-transform: none; letter-spacing: 0; }
.lnk { cursor: pointer; font-weight: 600; }
.lnk:hover { color: var(--cyan); text-decoration: underline; }
.minis { display: inline-flex; gap: 4px; justify-content: flex-end; }
.mini img { width: 26px; height: 26px; border-radius: 5px; background: var(--panel2); display: block; }
.sm.pad { color: var(--muted); font-size: 13px; padding: 18px 4px; text-align: center; }
.note { color: var(--muted); font-size: 12px; margin-top: 10px; }
.social .tbl th, .social .tbl td { padding-left: 7px; padding-right: 7px; }
.tbl .sub { font-size: 11px; color: var(--muted); }

/* сворачиваемое окно */
.card h3.toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.card h3.toggle:hover { color: var(--cyan); }
.card h3.toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 3px; }
.chev { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-bottom: 3px; }
.collapsed .chev { transform: rotate(-45deg); margin-bottom: 0; }
.collapsed h3.toggle { margin-bottom: 0; }
.collapsed .cbody { display: none; }

/* футер карточки: прижат к низу, даже если соседняя карточка выше */
.social .card { display: flex; flex-direction: column; }
.cfoot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.cfoot[hidden] { display: none; }
.social .more { margin-bottom: 12px; }
.social .card > [id$="Body"] { margin-bottom: 12px; }

/* игра в реальном времени */
.live { margin-bottom: 14px; }
.liveteams { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 12px; }
.live .dteam { margin: 0; }
.live .dt td { padding: 6px 8px; white-space: nowrap; }
.live .dt td.nm { text-align: left; }
.live .dt td .sub { font-size: 11px; color: var(--muted); }
.lsp { display: inline-flex; gap: 3px; }
.lsp .sp, .lsp .slot { display: block; width: 24px; height: 24px; border-radius: 4px; background: var(--panel2); overflow: hidden; cursor: help; box-sizing: border-box; }
.lsp .slot { background: none; border: 1px dashed var(--line); cursor: default; }
.lsp img { width: 100%; height: 100%; display: block; }
.live .dth .minis .mini img { width: 22px; height: 22px; }
.live .dt th { text-align: left; }

/* кликабельные строки чемпионов */
tr.clk, .m-row.clk { cursor: pointer; }
tr.clk:hover td { background: rgba(255,255,255,.035); }
.m-row.clk:hover b { color: var(--cyan); }
tr.clk:focus-visible, .m-row.clk:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

/* окно профиля чемпиона */
html.noscroll { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.72); display: flex; align-items: flex-start; justify-content: center; padding: clamp(10px, 4vh, 40px) 12px; overflow-y: auto; }
.modal[hidden] { display: none; }
.mbox { position: relative; width: min(920px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px 20px; }
.mbox::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--cmyk); border-radius: var(--r) var(--r) 0 0; }
.mclose { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; font-size: 22px; line-height: 1; background: none; border: 0; color: var(--muted); cursor: pointer; border-radius: 6px; }
.mclose:hover { color: #fff; background: rgba(255,255,255,.08); }
.mhead2 { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; padding-right: 30px; }
.mhead2 > img { width: 72px; height: 72px; border-radius: 10px; flex: none; }
.mhead2 h2 { margin: 0; font-size: 24px; }
.mhead2 .ttl { color: var(--muted); font-style: italic; margin: 2px 0 6px; }
.msec { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.msec h3 { margin: 0 0 12px; font: 600 12px var(--mono); color: #fff; text-transform: uppercase; letter-spacing: 1.2px; }
.msec h3 small, .mblk h4 small { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.mkpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.mk { background: var(--panel2); border-radius: 6px; padding: 8px 10px; }
.mk .l { font: 10px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.mk .v { font-size: 18px; font-weight: 700; margin-top: 2px; } .mk .v small { font-size: 11px; font-weight: 400; color: var(--muted); }
.mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.mrow .lbl { font: 11px var(--mono); color: var(--muted); text-transform: uppercase; min-width: 110px; }
.dots { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.dot { width: 12px; height: 12px; border-radius: 3px; } .dot.w { background: var(--win); } .dot.l { background: var(--loss); }
.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.mblk { background: var(--panel2); border-radius: 6px; padding: 10px 12px; min-width: 0; }
.mblk h4 { margin: 0 0 8px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.bis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 6px; }
.bi { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; font-variant-numeric: tabular-nums; }
.bi .it { width: 36px; height: 36px; } .bi small { font-size: 11px; }
.rr { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.rr .rn2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr b { min-width: 22px; text-align: right; } .rr small { min-width: 38px; text-align: right; }
.rk { display: block; width: 28px; height: 28px; border-radius: 50%; background: #000; overflow: hidden; cursor: help; flex: none; }
.rk.tree { cursor: default; } .rk img { width: 100%; height: 100%; display: block; }
.rr .mini img { width: 28px; height: 28px; }
.blurb { margin: 0 0 6px; color: #c8c8d0; line-height: 1.5; font-size: 14px; }
.ib { display: grid; grid-template-columns: 78px 1fr 20px; gap: 8px; align-items: center; font-size: 12px; margin-bottom: 6px; }
.ib span { color: var(--muted); } .ib i { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; display: block; }
.ib i b { display: block; height: 100%; background: var(--cyan); } .ib em { font-style: normal; text-align: right; }
.abs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ab { position: relative; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--bg); cursor: help; }
.ab img { width: 100%; height: 100%; display: block; }
.ab b { position: absolute; right: 2px; bottom: 1px; font: 700 11px var(--mono); color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.cst { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.cst b { color: var(--text); font-weight: 600; margin-left: 2px; }
@media (max-width: 560px) { .bis { grid-template-columns: repeat(4, 1fr); } .mhead2 > img { width: 56px; height: 56px; } .mrow .lbl { min-width: 100%; } }

/* окно чемпиона: статистика остальных игроков */
.bis.six { grid-template-columns: repeat(3, 1fr); }
.rk.sm { width: 22px; height: 22px; }
.rr.pg { flex-wrap: wrap; }
.pgi { display: inline-flex; gap: 3px; }
.gwarn { background: rgba(255,212,0,.08); border: 1px solid rgba(255,212,0,.35); color: var(--yellow); border-radius: 6px; padding: 6px 10px; margin-bottom: 10px; font-size: 12px; }
.gnote { margin-top: 12px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.pgcap { margin: 8px 0 0; font: 10px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }

/* окно чемпиона: блок «Остальные игроки» (база матчей или запасной расчёт) */
#crowdSec.busy { opacity: .55; transition: opacity .2s; pointer-events: none; }
.msec .src { margin-left: 8px; padding: 2px 8px; border-radius: 4px; font: 500 10px var(--mono); letter-spacing: .6px; border: 1px solid var(--line); vertical-align: 1px; }
.msec .src.db { color: var(--cyan); border-color: rgba(25,194,255,.45); background: rgba(25,194,255,.08); }
.msec .src.local { color: var(--yellow); border-color: rgba(255,212,0,.4); background: rgba(255,212,0,.07); }
.csig { margin: -4px 0 10px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.gsrc { margin-bottom: 10px; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; line-height: 1.45; color: #e8e2c0; background: rgba(255,212,0,.07); border-left: 3px solid var(--yellow); }
.gsrc b { color: #fff; }
.cctl { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
.cctl .flt select { max-width: 200px; }
.sbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 10px; padding: 7px 10px; background: var(--panel2); border-radius: 6px; font: 12px var(--mono); color: var(--muted); }
.sbar b { color: #fff; }
.bdg { padding: 2px 8px; border-radius: 4px; font: 600 11px var(--mono); white-space: nowrap; }
.bdg.ok { color: var(--win); background: rgba(62,207,142,.12); }
.bdg.low { color: var(--yellow); background: rgba(255,212,0,.12); }
.bdg.tiny { color: var(--loss); background: rgba(255,77,106,.13); }
.mk .s { margin-top: 1px; font-size: 11px; color: var(--muted); }
.mk.low .v { opacity: .75; } .mk.low .s { color: var(--yellow); }
.mk.hide .v { color: var(--muted); }
.mgrid.unrel .mblk { border: 1px dashed rgba(255,212,0,.35); }
.chide { margin: 10px 0; padding: 14px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }
.chide b { color: #fff; }
.chide .ghost { display: inline-block; margin-top: 8px; padding: 5px 12px; font-size: 12px; }
.chip.rk-via { border-style: dashed; } .chip.rk-unknown { opacity: .75; }
@media (max-width: 560px) {
  .cctl { flex-direction: column; align-items: stretch; gap: 8px; }
  .cctl .flt { width: 100%; } .cctl .flt select { flex: 1; min-width: 0; max-width: none; font-size: 14px; }
  .sbar { flex-direction: column; align-items: flex-start; }
  .csig { font-size: 13px; }
  .mrow .lbl small { display: inline; }
}

/* «Поделиться» */
.sbox { position: relative; width: min(640px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px 20px; }
.sbox::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--cmyk); border-radius: var(--r) var(--r) 0 0; }
.sbox .mclose { position: absolute; top: 8px; right: 10px; }
.sbox h3 { margin: 0 0 12px; padding-right: 30px; }
.sprev { aspect-ratio: 1200 / 630; background: #1b1d22; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
.sprev img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sprev img[hidden] { display: none; }
.srow { display: flex; gap: 8px; flex-wrap: wrap; }
.srow input { flex: 1 1 240px; min-width: 0; padding: 9px 10px; background: var(--bg, #0e0f11); color: var(--fg, #fff); border: 1px solid var(--line); border-radius: 6px; font-family: var(--mono); font-size: 13px; }
.srow .btn { padding: 9px 14px; }
.sbox .small { font-size: 13px; margin: 10px 0 0; }
.sbox .btn { background: var(--panel2, #1e2026); color: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font: inherit; }
.sbox .btn:hover { background: rgba(255,255,255,.1); }
.sbox .btn[hidden] { display: none; }

/* ---------- переключатель языка RU / EN ---------- */
.brandrow { display: flex; align-items: center; gap: 18px; }
.langsw {
  --i: 0; --w: 92px; --cell: 43px;
  position: relative; flex: none; width: var(--w); height: 34px; border: 1px solid var(--line); border-radius: 5px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent), var(--panel2);
  font: 700 12px/1 var(--mono); letter-spacing: 1.8px; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: border-color .2s, box-shadow .2s;
}
.langsw:hover { border-color: #5a5a66; }
.langsw:has(button:focus-visible) { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
/* метки приводки по углам: появляются при наведении */
.langsw::before, .langsw::after {
  content: ""; position: absolute; width: 9px; height: 9px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s;
  background: linear-gradient(#fff, #fff) center / 1px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 1px no-repeat;
}
.langsw::before { left: -6px; top: -6px; transform: translate(3px, 3px); }
.langsw::after { right: -6px; bottom: -6px; transform: translate(-3px, -3px); }
.langsw:hover::before, .langsw:hover::after, .langsw:has(button:focus-visible)::before, .langsw:has(button:focus-visible)::after { opacity: .75; transform: none; }
.lsrow { position: absolute; top: 0; bottom: 0; left: 2px; right: 2px; display: flex; color: var(--muted); }
.lsrow i { flex: 1; display: grid; place-items: center; font-style: normal; padding-left: 1.8px; /* компенсирует letter-spacing у последней буквы */ transition: color .25s; }
.langsw:hover .lsrow:not(.inv) i { color: #c8c8d0; }
.lsthumb {
  position: absolute; z-index: 1; left: 2px; top: 2px; bottom: 2px; width: var(--cell); overflow: hidden; border-radius: 3px; background: #fff; color: #000;
  transform: translateX(calc(var(--i) * var(--cell))); transition: transform .42s cubic-bezier(.7, 0, .2, 1), box-shadow .25s;
  box-shadow: 0 0 0 1px rgba(255,255,255,.9);
}
.lsthumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cmyk); background-size: 200% 100%; background-position: calc(var(--i) * 100%) 0; transition: background-position .42s cubic-bezier(.7, 0, .2, 1); }
.langsw:hover .lsthumb { box-shadow: 0 0 0 1px #fff, 0 0 14px rgba(25,194,255,.35); }
.lsthumb .lsrow.inv { left: 0; right: auto; width: calc(var(--cell) * 2); color: #0b0b0d; transform: translateX(calc(var(--i) * var(--cell) * -1)); transition: transform .42s cubic-bezier(.7, 0, .2, 1); }
.langsw:active .lsthumb { transform: translateX(calc(var(--i) * var(--cell))) scale(.94); }
.langsw button[role="radio"] { position: absolute; z-index: 2; top: 0; bottom: 0; width: 50%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; opacity: 0; cursor: pointer; }
.langsw button[data-v="ru"] { left: 0; } .langsw button[data-v="en"] { right: 0; }

/* «приводка» при смене языка: четыре CMYK-полосы пробегают по экрану */
.langwipe { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: grid; grid-template-rows: repeat(4, 1fr); }
.langwipe i { display: block; background: #1b1b20; transform: scaleX(0); transform-origin: left; }
.langwipe i:nth-child(2) { background: #2f2f37; } .langwipe i:nth-child(3) { background: #8e8e99; } .langwipe i:nth-child(4) { background: #fff; }
.langwipe.in i { animation: lwIn .3s cubic-bezier(.6, 0, .2, 1) forwards; }
.langwipe.out i { transform: scaleX(1); transform-origin: right; animation: lwOut .32s cubic-bezier(.6, 0, .2, 1) forwards; }
.langwipe i:nth-child(2) { animation-delay: .05s !important; } .langwipe i:nth-child(3) { animation-delay: .1s !important; } .langwipe i:nth-child(4) { animation-delay: .15s !important; }
@keyframes lwIn { to { transform: scaleX(1); } }
@keyframes lwOut { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .lsthumb, .lsthumb .lsrow.inv, .lsthumb::after { transition: none; } .langwipe { display: none; } }
@media (max-width: 760px) { .brandrow { width: 100%; justify-content: space-between; } }

/* уведомление о cookie: компактная карточка в углу, не закрывает страницу и не блокирует её */
.cnote { position: fixed; left: 18px; bottom: 18px; z-index: 60; width: min(360px, calc(100vw - 36px)); padding: 16px 16px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 14px 40px rgba(0,0,0,.55);
  backdrop-filter: blur(6px); opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.cnote.show { opacity: 1; transform: none; pointer-events: auto; }
.cnote.bye { opacity: 0; transform: translateY(10px) scale(.98); pointer-events: none; }
.cnote::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; border-radius: var(--r) var(--r) 0 0; background: var(--cmyk); background-size: 200% 100%; }
.cnote.show::before { animation: cnsweep 2.4s ease-out 1; }
@keyframes cnsweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
.cn-tag { display: block; font: 700 10px var(--mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cnote p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.cnote p b { color: #fff; }
.cn-act { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cn-act a { font-size: 13px; }
.cn-ok { font: 700 12px var(--mono); letter-spacing: 1px; text-transform: uppercase; padding: 9px 18px; border: 0; border-radius: 5px; background: #fff; color: #0b0b0d; cursor: pointer; box-shadow: inset 0 -3px 0 var(--cyan); }
.cn-ok:hover { box-shadow: inset 0 -3px 0 var(--magenta); }
.cn-ok:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
@media (max-width: 520px) { .cnote { left: 12px; right: 12px; bottom: 12px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .cnote, .cnote.show::before { transition: none; animation: none; } }

/* Champion-statistics links: clickable hitbox is limited to the champion icon */
.champ-stat-link{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0;border:0;border-radius:6px;background:transparent;line-height:0;cursor:pointer;vertical-align:middle}
.champ-stat-link img{display:block;pointer-events:none}
.champ-stat-link:hover{outline:2px solid var(--cyan);outline-offset:2px;filter:brightness(1.12)}
.champ-stat-link:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}
.champ .champ-stat-link{margin-right:2px}
.mini .champ-stat-link img{width:26px;height:26px;border-radius:5px}
.m-row>.champ-stat-link img{width:40px;height:40px;border-radius:6px;border:2px solid var(--magenta)}
.pl>.champ-stat-link,.trow .pl>.champ-stat-link{width:100%;height:100%}
.pl>.champ-stat-link img{width:100%;height:100%;object-fit:cover}

/* Gankly page navigation: restrained Printstream-style crossfade with a short CMYK registration shift. */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: gankly-page-out 150ms ease-in both;
}
::view-transition-new(root) {
  animation: gankly-page-in 280ms cubic-bezier(.2,.75,.25,1) both;
}
@keyframes gankly-page-out {
  from { opacity: 1; filter: brightness(1); }
  to { opacity: .72; filter: brightness(.72); }
}
@keyframes gankly-page-in {
  from { opacity: 0; transform: translateY(7px); filter: brightness(1.12); }
  72% { opacity: 1; }
  to { opacity: 1; transform: translateY(0); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Reliable fallback transition between Player Stats and Champions pages. */
@keyframes gankly-content-in {
  from { opacity: 0; transform: translateY(7px); filter: brightness(1.08); }
  to { opacity: 1; transform: translateY(0); filter: brightness(1); }
}
@keyframes gankly-content-out {
  to { opacity: .68; filter: brightness(.72); }
}
html.gankly-page-ready body > header,
html.gankly-page-ready body > main,
html.gankly-page-ready body > #status,
html.gankly-page-ready body > footer {
  animation: gankly-content-in 260ms cubic-bezier(.2,.75,.25,1) both;
}
html.gankly-page-leaving body > header,
html.gankly-page-leaving body > main,
html.gankly-page-leaving body > #status,
html.gankly-page-leaving body > footer {
  animation: gankly-content-out 115ms ease-in both;
}
@media (prefers-reduced-motion: reduce) {
  html.gankly-page-ready body > header,
  html.gankly-page-ready body > main,
  html.gankly-page-ready body > #status,
  html.gankly-page-ready body > footer,
  html.gankly-page-leaving body > header,
  html.gankly-page-leaving body > main,
  html.gankly-page-leaving body > #status,
  html.gankly-page-leaving body > footer { animation: none !important; }
}

/* Полосы прокрутки в стиле сайта */
*{scrollbar-width:thin;scrollbar-color:#3a3a44 transparent}
*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#3a3a44;border-radius:5px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--cyan,#19c2ff);background-clip:padding-box;border:2px solid transparent}