/* Оформление страницы Mini App: ряды раскладки + сетка 4×13, крупные ячейки, тёмная/светлая
   тема берётся из переменных Telegram (var(--tg-theme-*)) с безопасными запасными цветами. */
:root { color-scheme: light dark; --twp-red: #c0392b; }
/* Скрытый элемент скрыт всегда. Правило браузера [hidden] { display: none } слабее любого
   правила по id, поэтому без !important #tabs и #layout с display: flex оставались бы видны
   при hidden = true (например, ряды при снятой галочке «Разобрать мою раскладку»). */
[hidden] { display: none !important; }
body {
  margin: 0; padding: 8px;
  font: 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--tg-theme-bg-color, #fff);
  color: var(--tg-theme-text-color, #111);
}
header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
#counter { font-weight: 600; font-size: 13px; }

/* --- Ряды раскладки 1/2/4 --- */
#layout {
  display: flex; flex-direction: column; gap: 6px; margin: 8px 0;
  padding: 8px; border-radius: 10px;
  background: var(--tg-theme-secondary-bg-color, #f4f4f4);
}
.lane { display: flex; align-items: center; gap: 8px; }
.lane-name { width: 46px; flex: none; font-size: 12px; opacity: .7; }
.slots { display: flex; gap: 6px; }
.slot {
  width: 38px; height: 50px; border-radius: 7px; font-size: 16px; font-weight: 600;
  border: 1px dashed var(--tg-theme-hint-color, #bbb); background: transparent;
  color: inherit; cursor: pointer;
}
.slot.filled {
  border-style: solid; background: var(--tg-theme-bg-color, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.slot.red { color: var(--twp-red); }
.slot[disabled] { cursor: default; opacity: .55; }

/* --- Сетка карт --- */
#grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; margin: 8px 0; }
.cell {
  padding: 8px 0; border: 1px solid var(--tg-theme-hint-color, #bbb); border-radius: 6px;
  background: var(--tg-theme-secondary-bg-color, #f4f4f4);
  color: inherit; font-size: 13px; text-align: center; cursor: pointer;
}
.cell.red { color: var(--twp-red); }
.cell.on {
  background: var(--tg-theme-button-color, #2f8fdf);
  color: var(--tg-theme-button-text-color, #fff);
}
.joker { width: 100%; margin-top: 4px; padding: 10px 0; font-size: 15px; }

/* --- Подвал --- */
.switch { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 4px 0 8px; }
.switch input { width: 18px; height: 18px; }
footer .row { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
footer label { display: flex; gap: 4px; align-items: center; font-size: 13px; }
button#send, button#clear {
  flex: 1; padding: 12px 0; border: 0; border-radius: 8px; font-size: 16px; cursor: pointer;
  background: var(--tg-theme-button-color, #2f8fdf); color: var(--tg-theme-button-text-color, #fff);
}
button#clear { background: var(--tg-theme-secondary-bg-color, #e6e6e6); color: inherit; }
button#send[disabled] { opacity: .45; cursor: default; }
.note { font-size: 12px; opacity: .65; margin: 4px 0 0; }

/* --- Игроки за столом и вкладки их рук --- */
.players-count { display: flex; gap: 4px; align-items: center; font-size: 13px; }
#tabs { display: flex; gap: 4px; margin: 8px 0 0; flex-wrap: wrap; }
.tab {
  flex: 1; min-width: 70px; padding: 8px 4px; border-radius: 8px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--tg-theme-hint-color, #bbb);
  background: var(--tg-theme-secondary-bg-color, #f4f4f4); color: inherit;
}
.tab.active {
  background: var(--tg-theme-button-color, #2f8fdf);
  color: var(--tg-theme-button-text-color, #fff); border-color: transparent;
}
.tab.partial:not(.active) { border-style: dashed; }
/* Карта, выбранная в другой руке этой раздачи, — недоступна. */
.cell.taken, .cell[disabled] { opacity: .3; cursor: default; text-decoration: line-through; }

/* --- Тренировка: рука крупно, под ней ряды 1/2/4 --- */
.drill-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
#drill-title { font-weight: 600; font-size: 15px; }
#drill-hand { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 10px 0; }
.big-card {
  width: 44px; height: 62px; border-radius: 8px; font-size: 20px; font-weight: 600;
  border: 1px solid var(--tg-theme-hint-color, #bbb);
  background: var(--tg-theme-bg-color, #fff); color: inherit; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.big-card.red { color: var(--twp-red); }
.big-card.placed { border-style: dashed; box-shadow: none; background: transparent; cursor: default; }
#drill-layout {
  display: flex; flex-direction: column; gap: 6px; margin: 8px 0;
  padding: 8px; border-radius: 10px;
  background: var(--tg-theme-secondary-bg-color, #f4f4f4);
}
#drill-layout .lane { padding: 2px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
#drill-layout .lane.current { border-color: var(--tg-theme-button-color, #2f8fdf); }
#drill-view .row { display: flex; gap: 8px; margin: 6px 0; }
#drill-view .row button, #drill-next {
  flex: 1; padding: 12px 0; border: 0; border-radius: 8px; font-size: 16px; cursor: pointer;
  background: var(--tg-theme-secondary-bg-color, #e6e6e6); color: inherit;
}
#drill-view #drill-done, #drill-view #drill-next, #drill-view #drill-send {
  background: var(--tg-theme-button-color, #2f8fdf); color: var(--tg-theme-button-text-color, #fff);
}
#drill-next { width: 100%; margin-top: 8px; }
/* Выбор числа рук (D-7): крупные кнопки 3 / 5 / 10, выбранная — цветом кнопки Telegram. */
#drill-pick-options { display: flex; gap: 8px; margin: 12px 0; }
#drill-pick-options .pick {
  flex: 1; padding: 16px 0; border-radius: 10px; font-size: 20px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--tg-theme-hint-color, #bbb);
  background: var(--tg-theme-secondary-bg-color, #f4f4f4); color: inherit;
}
#drill-pick-options .pick.on {
  background: var(--tg-theme-button-color, #2f8fdf);
  color: var(--tg-theme-button-text-color, #fff); border-color: transparent;
}
#drill-start {
  width: 100%; padding: 12px 0; border: 0; border-radius: 8px; font-size: 16px; cursor: pointer;
  background: var(--tg-theme-button-color, #2f8fdf); color: var(--tg-theme-button-text-color, #fff);
}
#drill-view button[disabled] { opacity: .45; cursor: default; }
#drill-verdict { font-weight: 600; margin: 6px 0; }
#drill-top { margin: 4px 0; padding-left: 28px; font-size: 14px; }
#drill-top li.mine { font-weight: 600; }
#drill-summary h2, #check-view h2 { font-size: 17px; margin: 8px 0; }
#drill-totals, #drill-worst { margin: 6px 0; }