/* Цвета берём из темы Telegram (--tg-theme-*), с запасными значениями для обычного браузера. */
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --secondary-bg: var(--tg-theme-secondary-bg-color, #f1f1f4);
  --text: var(--tg-theme-text-color, #1a1a1a);
  --hint: var(--tg-theme-hint-color, #8a8a8e);
  --link: var(--tg-theme-link-color, #2a7bd6);
  --button: var(--tg-theme-button-color, #2a7bd6);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --destructive: var(--tg-theme-destructive-text-color, #d24a44);
  --radius: 10px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
}

#app { max-width: 640px; margin: 0 auto; padding: 6px 10px 32px; }

/* Верхний ряд шапки: приветствие + вкладки + шестерёнка — всё в одну строку */
#topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#hello { font-weight: 600; font-size: 13px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tabs { display: flex; gap: 4px; margin-left: auto; }
.tab {
  flex: 0 0 auto; padding: 6px 12px; border: none; border-radius: var(--radius);
  background: var(--secondary-bg); color: var(--text); font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.tab.active { background: var(--button); color: var(--button-text); }
#gearBtn { flex: 0 0 auto; }
#status { font-size: 11px; color: var(--hint); margin-bottom: 6px; }
#status:empty { display: none; }

.card {
  background: var(--secondary-bg); border-radius: var(--radius);
  padding: 9px 11px; margin-bottom: 6px;
}
/* компактная карточка для экрана партии */
.pcard { background: var(--secondary-bg); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 6px; }
.pcard summary { cursor: pointer; font-weight: 500; }
.pcard b { font-weight: 600; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.muted { color: var(--hint); font-size: 12px; }
h2 { font-size: 14px; font-weight: 600; margin: 0 0 6px; }

/* Кнопки */
button { font-family: inherit; }
.btn {
  border: none; border-radius: var(--radius); padding: 8px 14px;
  background: var(--button); color: var(--button-text); font-size: 14px; cursor: pointer; width: 100%;
}
.btn.secondary { background: var(--secondary-bg); color: var(--text); }
.btn.small { width: auto; padding: 5px 10px; font-size: 12px; }

/* Степпер количества */
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button {
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: var(--button); color: var(--button-text); font-size: 19px; line-height: 1; cursor: pointer;
}
.stepper .count { font-size: 22px; font-weight: 600; min-width: 26px; text-align: center; }

/* Чипы игроков / режимов */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 5px 11px; border-radius: var(--radius); font-size: 13px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--hint); color: var(--text);
}
.chip.on { background: var(--button); color: var(--button-text); border-color: var(--button); }

.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; padding: 7px; border: 1px solid var(--hint); background: var(--bg); color: var(--text);
  border-radius: var(--radius); font-size: 13px; cursor: pointer;
}
.seg button.on { background: var(--button); color: var(--button-text); border-color: var(--button); }

/* Список игр */
.game {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--secondary-bg); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 6px;
}
.game .title { font-size: 14px; }
/* название игры — это ссылка на Tesera: показываем явно (цвет ссылки + значок ↗) */
a.title { color: var(--link); text-decoration: none; }
a.title .ext { font-size: 0.8em; margin-left: 3px; opacity: 0.7; vertical-align: 1px; }
.game .meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.badge { font-size: 11px; padding: 2px 7px; border-radius: 8px; background: var(--bg); color: var(--hint); }
.badge.best { background: var(--button); color: var(--button-text); }
.badge.rec { background: var(--bg); color: var(--link); border: 1px solid var(--link); }
.badge.fav { background: var(--bg); color: var(--link); border: 1px solid var(--link); }
.owner { font-size: 11px; color: var(--hint); }
.thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--bg); }

/* Экран «не люблю» */
.search { width: 100%; padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--hint);
  background: var(--bg); color: var(--text); font-size: 14px; margin-bottom: 8px; }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid var(--secondary-bg);
}
.toggle-row.on .title { color: var(--destructive); }
.switch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--hint); flex-shrink: 0; }
.toggle-row.on .switch { background: var(--destructive); border-color: var(--destructive); }
.favlist .toggle-row.on .title { color: var(--link); }
.favlist .toggle-row.on .switch { background: var(--link); border-color: var(--link); }

input[type="text"] { font-family: inherit; }
.tools { display: flex; gap: 8px; margin-bottom: 8px; }
.empty { text-align: center; color: var(--hint); padding: 22px 10px; }
.spin { text-align: center; color: var(--hint); padding: 16px; }

/* Компактная панель «Список игр»: поиск + вид + сортировка + направление в одну строку */
.res-controls { display: flex; gap: 5px; margin-bottom: 6px; align-items: stretch; }
.res-controls .res-search { flex: 1.1; min-width: 0; margin-bottom: 0; padding: 8px 10px; font-size: 14px; }
.res-view, .res-sortsel {
  min-width: 0; padding: 8px 6px; border-radius: var(--radius);
  border: 1px solid var(--hint); background: var(--bg); color: var(--text); font-size: 14px;
}
.res-view { flex: 0 0 100px; width: 100px; }
.res-sortsel { flex: 1.4; }
.res-controls .res-dir { width: 36px; flex-shrink: 0; padding: 6px 0; text-align: center; }
/* Счётчик игр + легенда — один ряд */
.res-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 0 2px 8px; }
.res-count { margin: 0; font-size: 11px; color: var(--hint); white-space: nowrap; }
.res-meta .tl-legend { margin-left: auto; } /* легенда прижата вправо */

/* Кнопки на экране «Партии» — в один ряд */
.parties-actions { display: flex; gap: 6px; }
.parties-actions .btn { flex: 1; padding: 9px 6px; font-size: 13px; white-space: nowrap; }
.parties-actions #pickGame { flex: 1.4; }

/* Строка игрока в Настройках: имя/кнопки + его коллекция (логин + подпись) */
.player-row { padding: 8px 0; border-bottom: 1px solid var(--bg); }
.player-row:last-child { border-bottom: none; }
.player-row .r1 { display: flex; gap: 5px; margin-top: 5px; }
.player-row .col-login, .player-row .col-name { flex: 1; min-width: 0; margin: 0; padding: 6px 8px; font-size: 12px; }

/* Легенда цветов светофора */
.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; font-size: 11px; color: var(--hint); align-items: center; }
.tl-legend span { display: inline-flex; align-items: center; gap: 4px; }
.tl-legend .tl { width: 12px; height: 12px; opacity: 1; cursor: default; }

/* Горизонтальный «светофор» статуса: любимая (насыщ. зелёный) / хорошая (светло-зелёный) / не очень (жёлтый) / бан (красный) */
.traffic { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.tl { width: 19px; height: 19px; border-radius: 50%; border: 2px solid; background: transparent; cursor: pointer; padding: 0; opacity: 0.35; transition: opacity .1s; }
.tl.on { opacity: 1; }
.tl-fav { border-color: #1f9e5e; } .tl-fav.on { background: #1f9e5e; }
.tl-good { border-color: #84d18c; } .tl-good.on { background: #84d18c; }
.tl-meh { border-color: #e0a020; } .tl-meh.on { background: #e0a020; }
.tl-ban { border-color: #d24a44; } .tl-ban.on { background: #d24a44; }
/* в сетке светофор уходит под карточку по центру и чуть компактнее */
.games-list.display-grid-small .traffic,
.games-list.display-grid-large .traffic { align-self: center; gap: 5px; }
.games-list.display-grid-small .tl { width: 16px; height: 16px; }

/* ===== Виды списка игр («Все игры» / «Любимые» / «Бан») ===== */
.mode-switcher { display: flex; gap: 6px; margin-bottom: 6px; justify-content: center; }
.mode-btn {
  width: 42px; height: 30px; padding: 0; border: 1px solid var(--hint); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mode-btn.active { background: var(--button); color: var(--button-text); border-color: var(--button); }
.mode-btn:active { transform: scale(0.95); }

/* общие части карточки — вынесены из inline-стилей, чтобы CSS видов мог их переопределять */
.g-body { flex: 1; min-width: 0; }
.g-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 5px; }
.marks-line { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; font-size: 12px; }
/* карточка-тумблер в редакторе бан/любимых (раньше задавалась inline) */
.games-list .toggle-row {
  background: var(--secondary-bg); border-radius: var(--radius); border-bottom: none;
  padding: 8px 10px; margin-bottom: 6px; gap: 10px; cursor: pointer;
}

/* Подробный — как было */
.games-list.display-detailed { display: flex; flex-direction: column; }
.games-list.display-detailed .game { gap: 10px; }

/* Минималистичный — плотные строки, мелкая миниатюра, только число игроков */
.games-list.display-minimal { display: flex; flex-direction: column; }
.games-list.display-minimal .game,
.games-list.display-minimal .toggle-row { padding: 7px 10px; margin-bottom: 4px; }
.games-list.display-minimal .thumb { width: 28px; height: 28px; border-radius: 6px; }
.games-list.display-minimal .g-badges { margin-top: 2px; }
.games-list.display-minimal .title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.games-list.display-minimal .b-time,
.games-list.display-minimal .b-rating,
.games-list.display-minimal .b-weight,
.games-list.display-minimal .owner,
.games-list.display-minimal .marks-line { display: none; }
.games-list.display-minimal .switch { width: 22px; height: 22px; }

/* Сетка мелкая — 3–4 колонки, обложка сверху, название в 2 строки */
.games-list.display-grid-small { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; align-items: start; }
.games-list.display-grid-small .game,
.games-list.display-grid-small .toggle-row { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; padding: 6px; margin: 0; }
.games-list.display-grid-small .thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 8px; }
.games-list.display-grid-small .g-body { width: 100%; }
.games-list.display-grid-small .title { font-size: 12px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.games-list.display-grid-small .g-badges,
.games-list.display-grid-small .owner,
.games-list.display-grid-small .marks-line,
.games-list.display-grid-small .addToParty { display: none; }
.games-list.display-grid-small .switch { width: 20px; height: 20px; align-self: center; }

/* Сетка большая — 2 колонки, оставляем число игроков */
.games-list.display-grid-large { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: start; }
.games-list.display-grid-large .game,
.games-list.display-grid-large .toggle-row { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; padding: 8px; margin: 0; }
.games-list.display-grid-large .thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 8px; }
.games-list.display-grid-large .g-body { width: 100%; }
.games-list.display-grid-large .title { font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.games-list.display-grid-large .b-time,
.games-list.display-grid-large .b-rating,
.games-list.display-grid-large .b-weight,
.games-list.display-grid-large .owner,
.games-list.display-grid-large .marks-line,
.games-list.display-grid-large .addToParty { display: none; }
.games-list.display-grid-large .switch { width: 26px; height: 26px; align-self: center; }

@media (max-width: 340px) {
  .games-list.display-grid-small { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}