/* Salo.fun Team — стили командной комнаты и лендинга.
   База — ДС пати: ds-tokens.css (токены) + ds-components.css (ds-btn, ds-form,
   ds-link, ds-logo и пр.). Кастом с префиксом .tm- — доска команд, турнирная
   таблица, карточки игр, лендинг: готовых макетов под командную комнату в ДС
   нет, всё собрано из токенов; карточка игры повторяет паттерн каталога party
   (градиентная рамка через :before, обложка 1200×633). */

:root {
  --tm-orange: var(--color-1);
  --tm-cyan: #36c5fe;
  --tm-lavender: var(--color-8);
  --tm-green: #5bdd41;
  --tm-gold: #ffd34e;
  --tm-purple: #b882ff;
  --tm-pink: #ff7eb6;
  --tm-teal: #2dd4bf;
  --tm-blue: #60a5fa;
  --tm-coral: #ff7f6e;
  --tm-lime: #a3e635;
  --tm-indigo: #818cf8;
  --tm-magenta: #e879f9;
  --tm-sky: #38bdf8;
  --tm-rose: #fb7185;
}

body { background: var(--color-10); color: #fff; min-height: calc(var(--vh, 1vh) * 100); margin: 0; }

.tm { max-width: 1100px; margin: 0 auto; padding: 12px 12px 32px; display: flex; flex-direction: column; gap: 14px; }

/* Шапка */
.tm-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px; }
.tm-logo-team {
  background: var(--gradient-2);
  color: #fff; border-radius: 8px;
  margin-left: 8px; padding: 2px 8px;
  font-size: 14px; font-weight: 700; letter-spacing: .5px;
  vertical-align: middle;
}
.tm-header__room {
  color: var(--color-8); font-weight: 600; font-size: 14px;
  background: var(--color-7); border-radius: 10px; padding: 6px 12px;
}

/* Карточки-секции */
.tm-card { background: var(--color-7); border-radius: 16px; padding: 16px; }
.tm-card__title { font-size: 18px; margin: 0 0 12px; }
.tm-card__title i { color: var(--color-1); margin-right: 6px; }
.tm-muted { color: var(--color-8); opacity: .7; font-size: 13px; }

/* Праздничная карточка (вход, баннер игры): градиентная рамка как у каталога party */
.tm-festive { position: relative; background: var(--gradient-3); z-index: 0; }
.tm-festive:before {
  content: ""; position: absolute; inset: 2px; border-radius: 14px;
  background: var(--color-6); z-index: -1;
}

/* Вход */
.tm-join {
  max-width: 420px; width: 100%; margin: 8vh auto 0; text-align: center;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  padding: 28px 20px;
}
.tm-join__emoji { font-size: 44px; line-height: 1; }
.tm-join__title { margin: 0; font-size: 24px; }
.tm-join__text { color: var(--color-8); margin: 0; line-height: 1.5; }
.tm-join .ds-form { margin-top: 6px; }

.tm-error { max-width: 420px; margin: 10vh auto 0; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.tm-ingame { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; padding: 16px; border-radius: 16px; }
.tm-ingame p { margin: 0; }

/* Приглашение */
.tm-invite { display: flex; flex-direction: column; gap: 8px; }
.tm-invite__row { display: flex; align-items: center; gap: 10px; }

/* Управление командами (организатор) */
.tm-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tm-controls__btn { min-width: 40px; padding: 8px 0; }
.tm-controls__count { font-size: 18px; min-width: 18px; text-align: center; }
.tm-controls__hint { color: var(--color-1); font-weight: 600; }

/* Доска команд: цвет команды задаёт заливку, рамку и свечение карточки */
.tm-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tm-team--orange { --tm-team-color: var(--tm-orange); }
.tm-team--cyan { --tm-team-color: var(--tm-cyan); }
.tm-team--lavender { --tm-team-color: var(--tm-lavender); }
.tm-team--green { --tm-team-color: var(--tm-green); }
.tm-team--gold { --tm-team-color: var(--tm-gold); }
.tm-team--purple { --tm-team-color: var(--tm-purple); }
.tm-team--pink { --tm-team-color: var(--tm-pink); }
.tm-team--teal { --tm-team-color: var(--tm-teal); }
.tm-team--blue { --tm-team-color: var(--tm-blue); }
.tm-team--coral { --tm-team-color: var(--tm-coral); }
.tm-team--lime { --tm-team-color: var(--tm-lime); }
.tm-team--indigo { --tm-team-color: var(--tm-indigo); }
.tm-team--magenta { --tm-team-color: var(--tm-magenta); }
.tm-team--sky { --tm-team-color: var(--tm-sky); }
.tm-team--rose { --tm-team-color: var(--tm-rose); }
.tm-team {
  --tm-team-color: var(--color-8);
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tm-team-color) 16%, var(--color-7)) 0%, var(--color-7) 70%);
  border: 1px solid color-mix(in srgb, var(--tm-team-color) 45%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--tm-team-color) 12%, transparent);
}
.tm-team__head { display: flex; align-items: center; gap: 8px; }
.tm-team__name { font-weight: 700; font-size: 17px; flex: 1; color: var(--tm-team-color); }
.tm-team__size { background: rgba(0, 0, 0, .25); border-radius: 10px; padding: 2px 10px; font-size: 13px; }
.tm-team__players { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.tm-team__actions { margin-top: auto; }
.tm-team__action { width: 100%; }
.tm-team__collapsed { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }

.tm-player {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0, 0, 0, .2); border-radius: 10px; padding: 5px 8px;
  border: 1px solid transparent;
}
.tm-player--me .tm-player__name { font-weight: 700; }
.tm-player--selected { border-color: var(--color-1); }
.tm-player--offline { opacity: .45; }
.tm-player__avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--color-6); flex-shrink: 0; }
/* Имя игрока — в цвет своей команды (--tm-team-color задаёт карточка команды) */
.tm-player__name { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tm-team-color); }
.tm-player__captain { color: var(--tm-gold); }
.tm-player__makecaptain { opacity: 0; }
.tm-player:hover .tm-player__makecaptain { opacity: .7; }

/* Инлайн-поле переименования команды */
.tm-input--small {
  flex: 1; min-width: 0; background: var(--color-9); border: 1px solid var(--color-5);
  border-radius: 8px; color: #fff; padding: 4px 8px; font-size: 14px; outline: none;
}
.tm-input--small:focus { border-color: var(--color-1); }

.tm-iconbtn { background: none; border: none; color: var(--color-8); cursor: pointer; padding: 2px 6px; font-size: 13px; }
.tm-iconbtn:hover { color: var(--color-1); }
.tm-iconbtn:disabled { opacity: .3; cursor: default; }
.tm-iconbtn:disabled:hover { color: var(--color-8); }

/* Попап «Управление командами»: ds-popup, но фиксированный к окну страницы
   (в ДС панель абсолютная — рассчитана на контейнер игры) */
.tm-manage .ds-popup__overlay { position: fixed; z-index: 30; }
.tm-manage__panel {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  right: auto; bottom: auto;
  width: min(680px, calc(100vw - 24px)); max-height: min(80vh, 640px);
  border-radius: 16px; padding: 16px; z-index: 31;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}
.tm-manage__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 2px; }
.tm-mteam {
  --tm-team-color: var(--color-8);
  display: flex; flex-direction: column; gap: 6px; min-height: 104px;
  background: var(--color-6); border-radius: 12px; padding: 12px;
  border: 1px solid color-mix(in srgb, var(--tm-team-color) 45%, transparent);
}
.tm-mteam__head { display: flex; align-items: center; min-height: 26px; }
.tm-mteam__name { font-weight: 600; color: var(--tm-team-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-mteam__actions { display: flex; gap: 6px; margin-top: auto; }
.tm-mteam--add {
  align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  color: var(--color-8); border-style: dashed; font: inherit;
}
.tm-mteam--add:hover { color: var(--color-1); border-color: var(--color-1); }
.tm-mteam--add i { font-size: 20px; }

/* Выбор цвета команды: предзаданная палитра, занятые цвета погашены */
.tm-colors { display: flex; gap: 8px; }
.tm-colors__dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.tm-colors__dot--orange { background: var(--tm-orange); }
.tm-colors__dot--cyan { background: var(--tm-cyan); }
.tm-colors__dot--lavender { background: var(--tm-lavender); }
.tm-colors__dot--green { background: var(--tm-green); }
.tm-colors__dot--gold { background: var(--tm-gold); }
.tm-colors__dot--purple { background: var(--tm-purple); }
.tm-colors__dot--pink { background: var(--tm-pink); }
.tm-colors__dot--teal { background: var(--tm-teal); }
.tm-colors__dot--blue { background: var(--tm-blue); }
.tm-colors__dot--coral { background: var(--tm-coral); }
.tm-colors__dot--lime { background: var(--tm-lime); }
.tm-colors__dot--indigo { background: var(--tm-indigo); }
.tm-colors__dot--magenta { background: var(--tm-magenta); }
.tm-colors__dot--sky { background: var(--tm-sky); }
.tm-colors__dot--rose { background: var(--tm-rose); }
.tm-colors__dot.active { border-color: #fff; }
.tm-colors__dot:disabled { opacity: .25; cursor: default; }

/* История матчей под турнирной таблицей: игра + победитель и 2-е место */
.tm-history { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 10px; }
.tm-history__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.tm-history__game { color: var(--color-8); opacity: .8; min-width: 120px; }
.tm-history__team { display: inline-flex; align-items: center; gap: 4px; }
.tm-history__name { color: var(--tm-team-color); font-weight: 600; }

/* Турнир */
.tm-tournament { display: flex; flex-direction: column; gap: 6px; }
.tm-tournament__row {
  --tm-team-color: var(--color-8);
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tm-team-color) 14%, var(--color-9)) 0%, var(--color-9) 60%);
  border-left: 4px solid var(--tm-team-color);
  border-radius: 10px; padding: 8px 12px;
}
.tm-tournament__place { font-weight: 700; min-width: 28px; text-align: center; }
.tm-tournament__name { flex: 1; font-weight: 600; }
.tm-tournament__points { font-weight: 700; color: var(--color-1); font-size: 17px; }

/* Каталог игр: карточки с обложками по паттерну каталога party */
.tm-games { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tm-game {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: 10px; text-align: center;
  background: var(--gradient-3); z-index: 0;
}
.tm-game:before {
  content: ""; position: absolute; inset: 2px; border-radius: 9px;
  background: var(--color-6); z-index: -1;
}
.tm-game__cover { width: 100%; aspect-ratio: 1200 / 633; object-fit: cover; border-radius: 8px; display: block; }
.tm-game__label { font-size: 16px; color: var(--color-1); font-weight: 600; margin: 0; }
.tm-game__excerpt { margin: 0; color: var(--color-8); font-size: 13px; line-height: 1.4; flex: 1; }
.tm-game__action { display: flex; flex-direction: column; gap: 4px; align-items: center; }

@media (min-width: 768px) {
  .tm-games { grid-template-columns: repeat(3, 1fr); }
}

/* Onboarding */
.tm-onboarding {
  display: flex; align-items: flex-start; gap: 10px;
  background: linear-gradient(90deg, rgba(54, 197, 254, .12) 0%, var(--color-7) 60%);
  border-left: 3px solid var(--tm-cyan);
}
.tm-onboarding__text { margin: 0; font-size: 14px; line-height: 1.5; flex: 1; }
.tm-onboarding__close { margin-top: 2px; }

/* Бейдж Бета */
.tm-beta {
  display: inline-block;
  background: var(--gradient-2);
  color: #fff; border-radius: 8px;
  padding: 2px 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .5px;
  vertical-align: middle; margin-left: 6px;
}

/* 3 шага на лендинге */
.tm-steps {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  width: 100%;
}
.tm-step {
  display: flex; align-items: center; gap: 8px;
  background: var(--color-7); border-radius: 10px; padding: 8px 14px;
}
.tm-step__num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gradient-2); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tm-step__text { font-size: 14px; font-weight: 500; }

.tm-landing {
  max-width: 720px; margin: 0 auto; padding: 20px 16px 48px;
  display: flex; flex-direction: column; gap: 22px; align-items: center; text-align: center;
}
.tm-landing__title { margin: 14px 0 0; font-size: 32px; line-height: 1.2; }
.tm-landing__title b { color: var(--color-1); }
.tm-landing__sub { color: var(--color-8); line-height: 1.55; margin: 0; font-size: 17px; max-width: 560px; }
.tm-landing__button { font-size: 17px; padding: 16px 30px; }
.tm-landing__hint { color: var(--color-8); opacity: .7; font-size: 14px; margin: -10px 0 0; }
.tm-landing__covers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; }
.tm-landing__covers .tm-game__cover { border-radius: 8px; }
.tm-landing__feats { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.tm-feat {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--color-7); border-radius: 14px; padding: 12px 16px;
}
.tm-feat__emoji { font-size: 28px; line-height: 1; }
.tm-feat__text { margin: 0; line-height: 1.45; }
.tm-feat__text b { color: var(--color-1); }

@media (min-width: 576px) {
  .tm-landing__covers { grid-template-columns: repeat(3, 1fr); }
  .tm-landing__title { font-size: 38px; }
}