/* Страница «Команды». Держится на тех же кирпичах, что и «Матчи»:
   секция с заголовком, карточка, список людей.
   Цвета — только именами из app.css. */

/* Разделы здесь — панели. Вид и промежутки общие, см. app.css. */
.sec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--pad-panel);margin-top:0;margin-bottom:var(--gap-panel)}
.sechead{margin-bottom:12px;border-bottom:0;padding-bottom:0}

.muted{color:var(--txt-dim);font-size:13px;line-height:1.6}
.empty{color:var(--txt-dim);font-size:13px;padding:10px 0;background:none;border:0}

/* Шапка своей команды: название слева, баланс справа. */
.thead{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.thead b{font-family:var(--ost);font-size:22px;letter-spacing:.06em;
  text-transform:uppercase;color:#fff}
.thead .score{margin-left:auto;font-family:var(--ost);font-size:15px;
  letter-spacing:.08em;color:var(--accent-hi)}

.plist{list-style:none;margin:0 0 12px;padding:0}
/* Строка переносится: на телефоне ник плюс две кнопки в один ряд не
   влезают, и «Выгнать» уезжала за край страницы вместе со всей вёрсткой. */
.plist li{display:flex;align-items:center;gap:10px;padding:7px 0;flex-wrap:wrap;
  border-bottom:1px solid var(--line);font-size:14px}
.plist li:last-child{border-bottom:none}
.plist .tagline{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-dim)}
/* Кнопки владельца прижимаем вправо, чтобы они не рвали строку с ником. */
.plist li button{margin-left:auto}
.plist li button + button{margin-left:6px}
/* Ник — ссылка на профиль, и по ней надо попадать пальцем. */
.plist a.plink{display:inline-block;padding:7px 2px;margin:-7px -2px}
@media(max-width:520px){
  .plist li button{margin-left:0}
  .plist li button + button{margin-left:0}
  .plist li .who{flex:1 1 100%;min-width:0}
}

/* Ряд с полями: создать команду, вступить по коду. */
.trow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.trow input{background:var(--bg);border:1px solid var(--line);color:var(--txt);
  border-radius:var(--r);padding:8px 10px;font:inherit;font-size:14px;min-width:180px}
.trow input.tag{min-width:90px}
.trow input.code{min-width:120px;font-family:var(--ost);letter-spacing:.3em;
  text-transform:uppercase}

/* Карточка команды и строка личного счёта. */
.tcard{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid transparent;
  border-radius:var(--r);padding:12px 14px;margin-bottom:8px}
.tcard.mine{border-left-color:var(--accent)}
.tcard .line{display:flex;align-items:baseline;gap:12px}
.tcard .nm{font-family:var(--ost);font-size:16px;letter-spacing:.08em;
  text-transform:uppercase}
.tcard .nm.r{margin-left:0;text-align:right}
.tcard .score{margin-left:auto;font-family:var(--ost);color:var(--accent-hi);
  letter-spacing:.08em}
/* Счёт в личных встречах — по центру между названиями, в рамке, как
   счёт матча. */
.tcard .sc{flex:1;text-align:center;font-family:var(--ost);font-size:18px;
  letter-spacing:.1em;color:var(--txt)}
.tcard .muted{margin-top:6px}

@media (max-width:640px){
  .tcard .line{flex-wrap:wrap}
  .tcard .sc{flex-basis:100%;order:3;text-align:left}
}

/* Код приглашения. */
.invite{display:flex;align-items:center;gap:10px;margin:10px 0 4px;flex-wrap:wrap}
.invite .lbl{color:var(--txt-dim);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase}
.invite .val{padding:4px 12px;background:var(--bg);border:1px dashed var(--accent);
  border-radius:var(--r);font-family:var(--ost);font-size:15px;letter-spacing:.3em;
  color:var(--accent-hi)}

/* Карточка команды — ссылка. */
a.tcard{display:block;text-decoration:none;color:inherit;
  transition:border-color .14s,background .14s}
a.tcard:hover{border-left-color:var(--accent);background:var(--panel-3)}
.tcard .line{align-items:center}

/* Аватар из названия: общий вид в app.css, здесь размер. */
.tav{width:34px;height:34px;font-size:13px}
.thead .tav{margin-right:4px}
.plist .crown{color:var(--accent-hi);font-size:14px;line-height:1}

/* ════════════════ таблица команд ════════════════
   Как рейтинг команд на HLTV: место, логотип, название, очки. */

.kinds{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap;align-items:center}
.kinds .klabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-dim);margin-right:4px}
.kind{font-family:var(--ost);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;background:transparent;color:var(--txt-dim);
  border:1px solid var(--line);border-radius:var(--r);padding:6px 12px;cursor:pointer;
  transition:background .14s,color .14s,border-color .14s}
.kind:hover:not(:disabled){color:#fff;border-color:var(--txt-dim);background:transparent}
.kind.on,.kind.on:hover:not(:disabled){background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

.tw{overflow-x:auto}
table.stand{width:100%;border-collapse:collapse;font-size:13px}
table.stand 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}
table.stand th:nth-child(2){text-align:left}
table.stand td{padding:9px 8px;border-bottom:1px solid var(--line);
  text-align:right;white-space:nowrap}
table.stand tr:last-child td{border-bottom:0}
table.stand tbody tr:hover td{background:var(--panel-3)}
/* Не сыгравшие уходят вниз и гаснут. */
table.stand tr.zero td{color:var(--txt-dim)}
table.stand .pl{width:44px;text-align:left;font-family:var(--ost);
  font-size:16px;color:var(--accent-hi)}
table.stand .pl::before{content:"#";color:var(--txt-dim);font-size:12px;margin-right:1px}
table.stand tr.zero .pl{color:var(--txt-dim)}
table.stand .who{text-align:left;white-space:normal;min-width:150px}
table.stand .who a{display:flex;align-items:center;gap:8px;
  text-decoration:none;color:inherit;overflow-wrap:anywhere;
  padding:7px 2px;margin:-7px -2px;font-family:var(--ost);font-size:15px;
  letter-spacing:.04em;text-transform:uppercase}
table.stand .who a:hover{color:var(--accent-hi)}
table.stand .tlogo{width:24px;height:24px;object-fit:contain;flex:none;
  background:var(--bg);border-radius:3px}
table.stand .pts{font-family:var(--ost);font-size:17px;color:#fff;width:52px}
table.stand .good{color:var(--win-t)}
table.stand .bad{color:var(--loss-t)}

/* Ссылка-приглашение — поле только для чтения: её выделяют и копируют
   руками, когда буфер обмена недоступен (дома сайт открывают по http, а
   navigator.clipboard живёт только на https). */
.invite .val.link{flex:1 1 260px;min-width:0;letter-spacing:0;font-size:13px;
  color:var(--txt);border:1px solid var(--line);border-style:solid;padding:7px 10px;
  font-family:var(--man);background:var(--bg)}
.invbox{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;margin-top:12px}
.invbox .invite:first-child{margin-top:0}
.invbox .muted{margin-top:8px;font-size:12px}
/* Приглашение по ссылке — над всем остальным: человек пришёл именно
   за ним, а не за таблицей команд. */
.joincard{border-left:4px solid var(--accent)}
.joincard .trow{margin-top:12px}


/* ═══════════════ своя команда — одной полосой ═══════════════
   Фон команды — тот же, что на её странице (затемнён, чтобы читались
   буквы). Нет фона — обычная панель с оранжевой кромкой. */

.mine1{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 16px;
  align-items:center;background:linear-gradient(180deg,var(--panel),var(--bg-top));
  border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r);
  padding:14px 18px;margin-bottom:var(--gap-panel);overflow:hidden}
.mine1.has{background:linear-gradient(90deg,rgba(10,14,19,.92) 0%,rgba(10,14,19,.8) 55%,rgba(10,14,19,.55) 100%),
  var(--cover) center/cover no-repeat}
.mine1 .mid{min-width:0;display:flex;flex-direction:column;gap:6px}
.mine1 .nm{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mine1 .nm a{font-family:var(--ost);font-weight:600;font-size:22px;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;text-decoration:none}
.mine1 .nm a:hover{color:var(--accent-hi)}
.mine1 .nm .tag{font-size:13px;color:var(--txt-dim)}
.mine1 .sub{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;font-size:12px;color:var(--txt-dim)}
.mine1 .ros{display:flex;gap:6px;flex-wrap:wrap}
.mine1 .acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.mine1 button.code{font-family:var(--ost);font-weight:400;font-size:15px;letter-spacing:.3em;
  color:var(--accent-hi);border:1px dashed var(--accent);border-radius:3px;padding:5px 10px;
  background:var(--bg-top);text-transform:uppercase}
.mine1 button.code:hover:not(:disabled){background:var(--accent-bg);border-color:var(--accent)}
.mine1.none{grid-template-columns:minmax(0,1fr) auto auto}
.mine1.none .txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.mine1.none .txt b{font-family:var(--ost);font-weight:600;font-size:18px;letter-spacing:.06em;
  text-transform:uppercase}
.mine1.none .txt span{font-size:12px;color:var(--txt-dim);line-height:1.5}
.mine1.none .trow{margin-top:0}

.pchip{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:14px;padding:3px 10px 3px 3px;font-size:12px;
  color:var(--txt);text-decoration:none;white-space:nowrap}
.pchip:hover{border-color:var(--txt-dim)}
.pchip img{width:20px;height:20px;border-radius:50%;object-fit:cover}
.pchip:not(:has(img)){padding-left:10px}
.pchip.cap{border-color:var(--accent)}
.pchip.sub,.pchip.coach{color:var(--txt-dim);border-style:dashed}

/* Форма: пять последних серий, свежая справа. */
.form{display:inline-flex;gap:3px;vertical-align:middle}
.form i{width:9px;height:14px;border-radius:2px;display:inline-block;background:var(--txt-dim)}
.form i.w{background:var(--win)}
.form i.l{background:var(--loss)}
.fwrap{display:inline-flex;align-items:center}

/* ═══════════════ одна таблица ═══════════════ */
table.stand tr.me td{background:var(--accent-bg)}
table.stand tr.me .who b{color:var(--accent-hi)}
table.stand .who a.t1{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  padding:4px 2px;margin:-4px -2px;font-family:var(--ost);font-size:15px;letter-spacing:.04em;
  text-transform:uppercase}
table.stand .who a.t1 b{font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Столбец команды забирает всё, что осталось; длинное название — с многоточием. */
table.stand td.who{width:100%;max-width:0}
table.stand .who a.t1:hover b{color:var(--accent-hi)}
table.stand .who .tag{font-family:var(--man);font-size:11px;letter-spacing:.04em;
  text-transform:none;color:var(--txt-dim)}
table.stand .who .five{font-size:12px;color:var(--txt-dim);margin:3px 0 0 31px;
  white-space:normal;line-height:1.45}
table.stand td.fm{width:70px}
table.stand .pl .na{font-size:11px}
table.stand td.pl:has(.na)::before{content:none}

/* ═══════════════ личные счёты квадратом ═══════════════ */
.crosswrap{overflow-x:auto}
table.cross{border-collapse:separate;border-spacing:3px;font-size:13px}
table.cross th{font-family:var(--ost);font-weight:400;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-dim);padding:6px 8px;white-space:nowrap;
  max-width:120px;overflow:hidden;text-overflow:ellipsis}
table.cross th.rowh{text-align:left}
table.cross th.rowh a{color:var(--txt);text-decoration:none}
table.cross th.rowh a:hover{color:var(--accent-hi)}
table.cross td{min-width:92px;text-align:center;padding:8px 6px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:3px;font-family:var(--ost);font-size:16px}
table.cross td small{display:block;font-family:var(--man);font-size:10px;color:var(--txt-dim);
  margin-top:1px}
table.cross td.self{background:transparent;border-color:transparent;color:var(--line)}
table.cross td.w{border-color:var(--win);color:var(--win-t)}
table.cross td.l{border-color:rgba(214,58,42,.6);color:var(--loss-t)}
table.cross td.none .na{font-size:11px}

/* ═══════════════ окно «Управление» ═══════════════ */
.ov{position:fixed;inset:0;background:rgba(6,9,13,.86);z-index:120;padding:20px;overflow:auto;display:block}
.ovbox{max-width:680px;margin:6vh auto;background:var(--panel);border:1px solid var(--line);
  border-top:3px solid var(--accent);border-radius:var(--r);padding:22px;
  box-shadow:0 18px 60px rgba(0,0,0,.5)}
.ovbox h3{font-size:22px;letter-spacing:.08em;margin:0 0 4px}
.ovbox .step{font-family:var(--man);font-weight:800;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-hi);margin-bottom:10px}
.ovbox .muted{margin:0 0 12px}
.ovbox .muted.small{font-size:12px;margin-top:6px}
.mlist{border-top:1px solid var(--line);margin-bottom:12px}
.mrow2{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);
  font-size:13px;flex-wrap:wrap}
.mrow2 .who{font-weight:600;color:var(--txt);text-decoration:none}
.mrow2 .who:hover{color:var(--accent-hi)}
.mrow2 .mnote{font-size:11px;color:var(--txt-dim)}
.mrow2 .grow{flex:1}
.mrow2 .role{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.mrow2 .role button{border:0;border-radius:0;padding:6px 9px;font-size:10px;background:transparent;
  color:var(--txt-dim)}
.mrow2 .role button.on{background:var(--panel-3);color:#fff;opacity:1}
.mrow2 .role button:disabled:not(.on){opacity:.45}
.inv{display:flex;gap:8px;align-items:center;margin:10px 0 0;flex-wrap:wrap}
.inv .url{flex:1 1 260px;min-width:0;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r);padding:8px 10px;font:inherit;font-size:13px;color:var(--txt)}
.inv .codebig{font-family:var(--ost);font-size:17px;letter-spacing:.3em;color:var(--accent-hi);
  border:1px dashed var(--accent);border-radius:3px;padding:5px 12px;background:var(--bg-top)}
.ovbox .foot{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;align-items:center}
.ovbox .foot .grow{flex:1}

@media(max-width:760px){
  .mine1{grid-template-columns:auto minmax(0,1fr)}
  .mine1 .acts{grid-column:1/-1;justify-content:flex-start}
  .mine1.none{grid-template-columns:1fr}
  table.stand .hm{display:none}
  table.stand .who .five{display:none}
  table.stand .who .tag{display:none}
  table.stand th,table.stand td{padding:8px 6px}
  table.stand .who{min-width:0}
  .mrow2 .grow{display:none}
  .ovbox{padding:16px;margin:2vh auto}
}

/* ═══════════════ фон команды в строке таблицы ═══════════════
   Та же картинка, что на странице команды и в полосе своей команды:
   слева затемнено сильнее — там название, справа картинку видно. */
table.stand td.who.cov{background:linear-gradient(90deg,rgba(26,34,44,.96) 0%,rgba(26,34,44,.82) 45%,
  rgba(26,34,44,.45) 100%),var(--cover) center/cover no-repeat}
table.stand tbody tr:hover td.who.cov{background:linear-gradient(90deg,rgba(44,57,72,.96) 0%,
  rgba(44,57,72,.8) 45%,rgba(44,57,72,.4) 100%),var(--cover) center/cover no-repeat}
table.stand tr.me td.who.cov{background:linear-gradient(90deg,rgba(52,36,28,.96) 0%,rgba(52,36,28,.8) 45%,
  rgba(52,36,28,.42) 100%),var(--cover) center/cover no-repeat}
table.stand td.who.cov .five{color:#c4d0dc}

/* ═══════════════ временная замена ═══════════════ */
.pchip.away{opacity:.6;border-style:dashed}
.pchip.guest{border-color:var(--t);color:var(--txt)}
.mrow2 .mnote.loan{color:var(--t)}

/* Позвали на время / вы на замене — над своей командой. */
.loanbox{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--t);border-radius:var(--r);
  padding:12px 16px;margin-bottom:var(--gap-panel)}
.loanbox.ask{border-left-color:var(--accent)}
.loanbox .txt{flex:1 1 320px;display:flex;flex-direction:column;gap:3px;min-width:0}
.loanbox .txt b{font-family:var(--ost);font-weight:600;font-size:16px;letter-spacing:.06em;
  text-transform:uppercase;color:#fff}
.loanbox .txt span{font-size:12.5px;color:var(--txt-dim);line-height:1.5}
.loanbox .acts{display:flex;gap:8px;flex-wrap:wrap}

/* Окно «Управление»: позвать на время. */
.loansec{border-top:1px solid var(--line);padding-top:14px;margin:4px 0 12px}
.loansec .step{margin-bottom:6px}
.loansec .muted{margin:0 0 10px}
.lrow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.lrow select{background:var(--bg);color:var(--txt);border:1px solid var(--line);border-radius:var(--r);
  padding:8px 10px;font:inherit;font-size:13px;min-width:0}
.lrow select:first-child{flex:1 1 240px}
.dchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dchips button{font-size:10px;padding:7px 10px}
.dchips button.small.primary{margin-left:auto}
.lsent{border-top:1px solid var(--line);margin-top:12px}
@media(max-width:760px){
  .dchips button.small.primary{margin-left:0}
}