/* ============================================================
   Мобильная адаптация + стили турнирного модуля
   ============================================================ */

/* --- Универсальная горизонтальная прокрутка для всех таблиц --- */
/* ВАЖНО: overflow-x:auto автоматически делает overflow-y тоже не-visible,
   поэтому выпадающие списки внутри .panel-body обрезались.
   Панели с автодополнением помечаются классом .panel-body-visible. */
.panel-body:not(.panel-body-visible){ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.panel-body-visible{ overflow:visible; }
.table-scroll:not(.table-scroll-visible){ overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* Вариант без обрезки по вертикали — для таблиц с выпадающим пикером поиска внутри ячейки (иначе выпадающий список обрезается). Горизонтальная прокрутка таблицы всё равно работает через вложенный внутренний div с overflow-x. */
.table-scroll.table-scroll-visible{ overflow:visible; }
.table-scroll.table-scroll-visible>.table-scroll-inner{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.panel-body::-webkit-scrollbar, .table-scroll::-webkit-scrollbar{ height:8px; }
.panel-body::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb{
  background:var(--color-border); border-radius:var(--radius-full);
}
.scroll-hint{
  display:none; font-size:11px; color:var(--color-text-faint);
  padding:6px 14px 0; font-weight:600;
}

/* --- Выпадающий список автодополнения (поиск игрока) --- */
.autocomplete-list{
  position:absolute; top:100%; left:0; right:0; z-index:60; display:none;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); margin-top:4px; box-shadow:var(--shadow-lg);
  max-height:min(58vh, 420px); overflow-y:auto; overscroll-behavior:contain;
}
.autocomplete-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; font-size:14px; background:transparent; border:0; cursor:pointer;
}
.autocomplete-item:hover, .autocomplete-item.active{ background:var(--color-surface-offset); }
.autocomplete-item .ac-rating{
  margin-left:auto; font-size:12px; color:var(--color-text-muted);
  font-variant-numeric:tabular-nums; flex-shrink:0;
}
.autocomplete-empty{ padding:12px; font-size:13px; color:var(--color-text-muted); }
.autocomplete-hint{
  padding:8px 12px; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--color-text-faint);
  border-bottom:1px solid var(--color-divider); position:sticky; top:0;
  background:var(--color-surface);
}

/* --- Турниры: карточки и списки --- */
.t-card{
  border:1px solid var(--color-divider); border-radius:var(--radius-lg);
  padding:14px 16px; background:var(--color-surface-2); margin-bottom:10px;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
}
.t-card-main{ min-width:0; }
.t-card-title{ font-weight:700; font-size:15px; }
.t-card-meta{ font-size:12px; color:var(--color-text-muted); margin-top:3px; }
.t-card-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.t-list{ padding:14px; display:flex; flex-direction:column; }

/* --- Блок настройки плей-офф --- */
.t-config-box{
  margin-top:16px; padding:14px 16px; border-radius:var(--radius-lg);
  border:1px solid var(--color-border); background:var(--color-surface-2);
}
.t-config-title{
  font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--color-text-muted); margin-bottom:12px;
}
.t-config-hint{
  margin-top:12px; font-size:12.5px; line-height:1.55; color:var(--color-text-muted);
  padding:9px 11px; border-radius:var(--radius-md); background:var(--color-surface);
  border:1px solid var(--color-divider);
}
.t-config-hint:empty{ display:none; }

/* --- Выбор участников --- */
.picker-wrap{ margin-top:16px; }
.picker-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin-bottom:8px;
}
.picker-label{ font-size:12px; font-weight:600; color:var(--color-text-muted); }
.picker-label strong{ color:var(--color-primary); font-size:14px; }
.picker-found{ font-size:11.5px; color:var(--color-text-faint); font-variant-numeric:tabular-nums; }

.picker-toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.picker-toolbar input{ flex:1 1 240px; min-width:0; }
.picker-toolbar select{ flex:0 0 auto; width:auto; min-width:150px; }

.picker-quick{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.picker-quick-label{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--color-text-faint); margin-right:2px;
}

.picker-chips{
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;
  max-height:132px; overflow-y:auto; padding:9px 10px;
  border:1px dashed var(--color-border); border-radius:var(--radius-md);
  background:var(--color-surface-2);
}
.picker-chips-empty{ font-size:12.5px; color:var(--color-text-muted); }
.picker-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:4px 5px 4px 10px; border-radius:var(--radius-full);
  background:var(--color-primary-highlight); color:var(--color-primary);
  border:1px solid var(--color-primary); max-width:100%;
}
.picker-chip-x{
  border:0; background:transparent; color:inherit; cursor:pointer;
  font-size:16px; line-height:1; padding:0 4px; border-radius:var(--radius-full);
  opacity:.65;
}
.picker-chip-x:hover{ opacity:1; background:rgba(0,0,0,.08); }

.picker-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:6px; max-height:340px; overflow-y:auto; overscroll-behavior:contain; padding:10px;
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  background:var(--color-surface-2);
}
.picker-empty{ font-size:13px; color:var(--color-text-muted); padding:10px; grid-column:1/-1; }
.picker-item{
  display:flex; align-items:center; gap:8px; font-size:13px; padding:7px 9px;
  border-radius:var(--radius-md); cursor:pointer; border:1px solid transparent;
  min-width:0;
}
.picker-item:hover{ background:var(--color-surface-offset); }
.picker-item.checked{ background:var(--color-primary-highlight); border-color:var(--color-primary); }
.picker-item input{ accent-color:var(--color-primary); width:16px; height:16px; flex-shrink:0; }
.picker-item .pk-rank{
  font-size:10.5px; font-weight:700; color:var(--color-text-faint);
  font-variant-numeric:tabular-nums; flex-shrink:0; min-width:26px;
}
.picker-item .pk-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.picker-item .pk-rating{ margin-left:auto; font-size:11px; color:var(--color-text-muted); font-variant-numeric:tabular-nums; flex-shrink:0; }

/* --- Мобильный выбор игрока для формы матча (замена длинных <select>) --- */
.mp-picker{ position:relative; }
.mp-picker-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 11px; border-radius:var(--radius-md); border:1px solid var(--color-border);
  background:var(--color-surface-2); font-size:14px; text-align:left; cursor:pointer;
  color:var(--color-text-muted); min-height:44px;
}
.mp-picker-trigger.filled{ color:var(--color-text); font-weight:600; }
.mp-picker-trigger.open{ border-color:var(--color-primary); }
.mp-picker-trigger-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.mp-picker-chevron{ flex-shrink:0; opacity:.6; transition:transform .15s ease; }
.mp-picker-trigger.open .mp-picker-chevron{ transform:rotate(180deg); }

.mp-picker-panel{
  position:absolute; top:100%; left:0; right:0; z-index:70; display:none;
  margin-top:6px; padding:10px; background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
}
.mp-picker-panel.open{ display:block; }
.mp-picker-search{
  width:100%; padding:10px 11px; border-radius:var(--radius-md); border:1px solid var(--color-border);
  background:var(--color-surface-2); font-size:14px; margin-bottom:8px; min-height:44px;
}
.mp-picker-quick{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.mp-picker-grid{
  display:flex; flex-direction:column; gap:4px; max-height:min(50vh, 320px);
  overflow-y:auto; overscroll-behavior:contain;
}
.mp-item{ min-height:44px; padding:8px 10px; }
.mp-item.active{ background:var(--color-surface-offset); }
.mp-item.checked{ background:var(--color-primary-highlight); border-color:var(--color-primary); }

@media (max-width:520px){
  /* Панель прикреён к верху экрана (а НЕ к низу), потому что клавиатура занимает место снизу —
     если привязать панель к низу экрана (как раньше), она уедет под клавиатуру и станет
     невидимой. dvh (динамическая высота видимой области), а не vh — чтобы высота
     панели сама уменьшалась, когда клавиатура открывается, вместо того чтобы вылезать за край. */
  .mp-picker-panel{
    position:fixed; left:12px; right:12px; top:76px; bottom:auto;
    max-height:calc(100dvh - 100px); overflow-y:auto;
  }
}

.t-status{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--radius-full); }
.t-status.active{ background:var(--color-primary-highlight); color:var(--color-primary); }
.t-status.done{ background:var(--color-success-highlight); color:var(--color-success); }

.t-group-title{
  font-size:13px; font-weight:700; padding:12px 16px 6px;
  color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.04em;
}
.score-select{
  padding:6px 8px; border-radius:var(--radius-sm); border:1px solid var(--color-border);
  background:var(--color-surface-2); font-size:13px; min-width:82px;
}
.score-modal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.score-pill{
  padding:14px 6px; border-radius:var(--radius-md); border:1px solid var(--color-border);
  background:var(--color-surface-2); font-size:16px; font-weight:700; cursor:pointer;
  font-variant-numeric:tabular-nums; text-align:center;
}
.score-pill:hover{ background:var(--color-surface-offset); }
.score-pill.active{ background:var(--color-primary-highlight); border-color:var(--color-primary); color:var(--color-primary); }
@media(pointer:coarse){ .score-pill{ padding:16px 6px; } }
.row-withdrawn{ opacity:.55; }
.t-match-players{ font-weight:600; }
.t-seed{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  border-radius:var(--radius-full); background:var(--color-surface-offset);
  font-size:10px; font-weight:800; color:var(--color-text-muted); margin-right:6px; padding:0 5px;
}

/* --- Сетка плей-офф --- */
.bracket{ display:flex; gap:18px; padding:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.bracket-round{ display:flex; flex-direction:column; justify-content:space-around; gap:12px; min-width:230px; }
.bracket-round-title{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--color-text-muted); margin-bottom:2px;
}
.bracket-match{
  border:1px solid var(--color-divider); border-radius:var(--radius-md);
  background:var(--color-surface-2); overflow:hidden;
}
.bracket-slot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 10px; font-size:13px;
}
.bracket-slot + .bracket-slot{ border-top:1px solid var(--color-divider); }
.bracket-slot.win{ background:var(--color-success-highlight); font-weight:700; }
.bracket-slot .bs-score{ font-variant-numeric:tabular-nums; font-weight:700; }
.bracket-slot .bs-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bracket-actions{ padding:7px 10px; border-top:1px solid var(--color-divider); display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.bracket-bye{ color:var(--color-text-faint); font-style:italic; }

/* --- Классификационная сетка: блоки внутри круга --- */
.bracket-block + .bracket-block{ margin-top:18px; padding-top:14px; border-top:1px dashed var(--color-border); }

/* --- Заголовки финалов --- */
.t-final-head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:16px 16px 4px; font-size:15px; font-weight:800;
}
.t-final-sep{ height:1px; background:var(--color-divider); margin:22px 0 0; }
.t-group-sub{
  font-size:11.5px; font-weight:600; color:var(--color-text-muted);
  text-transform:none; letter-spacing:0; margin-left:8px;
}

/* --- Итоговые места --- */
.t-places{ padding:4px 16px 18px; }
.t-places-title{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--color-text-muted); margin-bottom:8px;
}
.t-places-list{ list-style:none; margin:0; padding:0; display:grid; gap:4px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.t-places-list li{
  display:flex; align-items:center; gap:9px; font-size:13.5px; padding:6px 10px;
  border-radius:var(--radius-md); background:var(--color-surface-2);
  border:1px solid var(--color-divider);
}
.t-places-list li:nth-child(1){ background:var(--color-warning-highlight, var(--color-surface-offset)); font-weight:700; }
.tp-num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:24px; border-radius:var(--radius-full); flex-shrink:0;
  background:var(--color-surface-offset); font-size:11.5px; font-weight:800;
  font-variant-numeric:tabular-nums;
}
.t-places-list li:nth-child(1) .tp-num{ background:var(--color-primary); color:#fff; }

/* --- Зоны выхода в таблицах групп --- */
.row-adv-up  td:first-child{ box-shadow:inset 3px 0 0 var(--color-primary); }
.row-adv-low td:first-child{ box-shadow:inset 3px 0 0 var(--color-text-faint); }
.t-legend{
  padding:12px 16px 18px; font-size:12px; line-height:1.6; color:var(--color-text-muted);
}
.t-stage{
  font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:var(--radius-full);
  background:var(--color-surface-offset); color:var(--color-text-muted); margin-left:6px;
  text-transform:uppercase; letter-spacing:.03em;
}
.t-empty-stage{ padding:26px 18px; text-align:center; }
.t-empty-title{ font-size:15px; font-weight:700; margin-bottom:8px; }
.t-empty-desc{ font-size:13px; line-height:1.65; color:var(--color-text-muted); max-width:620px; margin:0 auto; }

/* --- Бейдж «кто внёс результат» --- */
.recorded-by{ font-size:11px; color:var(--color-text-muted); white-space:nowrap; }

/* --- Полоса формы в профиле игрока (последние матчи: победа/поражение) --- */
.form-dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-right:3px; border-radius:var(--radius-full);
  font-size:11px; font-weight:800; color:#fff; cursor:default;
}
.form-dot-w{ background:var(--color-success); }
.form-dot-l{ background:var(--color-error); }

/* ============================================================
   Брейкпоинты
   ============================================================ */
@media(max-width:900px){
  .content{ padding:16px 14px 60px; }
  .topbar{ padding:12px 14px; }
  .topbar h1{ font-size:18px; }
  .kpi-grid{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
  .kpi-value{ font-size:21px; }
  .panel-header{ padding:13px 14px; }
  .panel-body{ padding:14px; }
  .panel-body[style*="padding:0"]{ padding:0 !important; }
}

@media(max-width:720px){
  /* Таблицы не сжимаются — прокручиваются вбок, правые колонки не обрезаются */
  .panel-body table, .table-scroll table{ min-width:620px; }
  #players-table-wrap table{ min-width:680px; }
  #matches-table-wrap table{ min-width:820px; }
  #scalps-table-wrap table{ min-width:760px; }
  .t-standings table{ min-width:560px; }
  .t-schedule table{ min-width:600px; }
  table th{ padding:9px 10px; font-size:11px; }
  table td{ padding:9px 10px; font-size:13px; }
  .scroll-hint{ display:block; }

  /* Первый столбец (имя/дата) закреплён, чтобы не терять контекст при прокрутке */
  .sticky-first th:first-child, .sticky-first td:first-child{
    position:sticky; left:0; z-index:2;
    background:var(--color-surface); box-shadow:1px 0 0 var(--color-divider);
  }
  /* Имя игрока в закреплённом столбце ограничиваем по ширине и обрезаем многоточием, чтобы длинное ФИО не закрывало следующие колонки (рейтинг и т.п.) до прокрутки вбок */
  .sticky-first:not(.mobile-card-table) td:first-child .player-cell{
    max-width:132px;
  }
  .sticky-first:not(.mobile-card-table) td:first-child .player-cell .player-link,
  .sticky-first:not(.mobile-card-table) td:first-child .player-cell>span{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
  }
  .sticky-first:not(.mobile-card-table) td:first-child .player-cell .avatar{
    width:26px; height:26px; font-size:10px;
  }

  .form-grid{ grid-template-columns:1fr; gap:11px; }
  .set-row{ grid-template-columns:56px 1fr 18px 1fr; gap:6px; }
  .set-label{ font-size:11px; }
  .score-live{ gap:8px; padding:11px; flex-wrap:wrap; }
  .score-live .name{ max-width:110px; font-size:13px; }
  .score-live .sets-count{ font-size:22px; }
  .picker-grid{ grid-template-columns:1fr 1fr; max-height:240px; }
  .bracket-round{ min-width:200px; }
  .t-card{ flex-direction:column; align-items:stretch; }
  .t-card-actions .btn{ flex:1; justify-content:center; }
  .btn{ padding:9px 12px; }
  .modal-footer{ flex-direction:column-reverse; }
  .modal-footer .btn{ width:100%; justify-content:center; }
  #dlchat-footer{ flex-direction:column; }
  .toast-wrap{ left:12px; right:12px; bottom:12px; }
  .toast{ text-align:center; }
  #profile-search-results{ max-height:min(56vh, 380px); }
}

@media(max-width:420px){
  .picker-grid{ grid-template-columns:1fr; }
  .kpi-grid{ grid-template-columns:1fr 1fr; }
  .tabs{ width:100%; overflow-x:auto; }
  .tab{ white-space:nowrap; }
}

/* Тач-цели не меньше 40px на мобильных */
@media(pointer:coarse){
  .btn-sm{ padding:8px 12px; }
  .nav-item{ padding:12px; }
  .score-select{ padding:9px 8px; }
}


/* ===== Рейтинг мелкими цифрами рядом с именем ===== */
.p-rt{
  display:inline-block; margin-left:6px; padding:1px 5px;
  font-size:10.5px; line-height:1.5; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
  color:var(--color-text-muted); background:var(--color-surface-2, rgba(127,127,127,.10));
  border:1px solid var(--color-divider); border-radius:5px;
  vertical-align:2px; white-space:nowrap;
}
.bracket-slot .p-rt{ margin-left:5px; font-size:10px; padding:0 4px; }
.t-places-list .p-rt{ font-size:10px; }

/* ===== Плашка стола ===== */
.t-table-badge{
  display:inline-block; margin-left:8px; padding:2px 7px;
  font-size:11px; font-weight:800; letter-spacing:.02em;
  color:var(--color-accent-ink, #0b3b34); background:var(--color-accent-soft, rgba(20,160,140,.16));
  border:1px solid var(--color-accent, rgba(20,160,140,.45)); border-radius:6px; white-space:nowrap;
}
.bracket-actions .t-table-badge{ margin-left:0; margin-right:6px; }
.t-live-badge{
  display:inline-block; margin-left:8px; padding:2px 8px;
  font-size:11px; font-weight:700; border-radius:999px;
  color:var(--color-accent-ink, #0b3b34); background:var(--color-accent-soft, rgba(20,160,140,.16));
  border:1px solid var(--color-divider);
}

/* ===== Экран «Вызов и столы» ===== */
.calls-wrap{ padding:16px; }
.calls-controls{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--color-divider);
}
.calls-stat{ font-size:13px; color:var(--color-text-muted); margin-left:auto; }
.calls-stat strong{ color:var(--color-text); }
.calls-title{
  font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-text-muted); margin:22px 0 10px;
}
.calls-empty{
  padding:22px 16px; text-align:center; font-size:14px;
  color:var(--color-text-muted); border:1px dashed var(--color-divider); border-radius:10px;
}

.tbl-board{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
.tbl-card{
  border:1px solid var(--color-divider); border-radius:12px; padding:13px 14px;
  display:flex; flex-direction:column; gap:7px; min-height:104px;
}
.tbl-card.free{ border-style:dashed; opacity:.72; justify-content:flex-start; }
.tbl-card.busy{ border-color:var(--color-accent, rgba(20,160,140,.5)); box-shadow:inset 3px 0 0 var(--color-accent, rgba(20,160,140,.7)); }
.tbl-num{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--color-text-muted);
}
.tbl-pair{ font-size:14px; font-weight:700; line-height:1.5; word-break:break-word; }
.tbl-vs{ display:block; font-size:10.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; color:var(--color-text-faint); margin:2px 0; }
.tbl-vs-in{ color:var(--color-text-faint); margin:0 2px; }
.tbl-meta{ font-size:12px; color:var(--color-text-muted); }
.tbl-empty{ font-size:13px; color:var(--color-text-faint); font-style:italic; }
.tbl-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:3px; }
.tbl-dash{ color:var(--color-text-faint); }

.call-select{
  font-size:13px; padding:5px 8px; border-radius:7px;
  border:1px solid var(--color-divider); background:var(--color-surface); color:var(--color-text);
  max-width:150px;
}
.call-stage{ font-size:12.5px; color:var(--color-text-muted); white-space:nowrap; }
.call-wait{ font-size:12px; color:var(--color-text-faint); white-space:nowrap; }
tr.row-blocked{ opacity:.6; }

@media (max-width: 720px){
  .calls-wrap{ padding:12px; }
  .tbl-board{ grid-template-columns:1fr; gap:10px; }
  .calls-stat{ margin-left:0; width:100%; }
  .call-select{ max-width:120px; }
  .p-rt{ font-size:10px; margin-left:5px; padding:0 4px; }
}


/* =====================================================================
   Мой профиль / карточка игрока: таблицы «Соперники», «Пояса»,
   «История матчей», «Вызовы на дуэль», «Турниры» на мобильных экранах
   превращаются в карточки (по одной на строку) вместо горизонтально
   прокручиваемой таблицы. Имя игрока (первая колонка) показывается
   полностью, без обрезки — это заголовок карточки. Остальные значения
   подписываются названием столбца через data-label (см. index.html).
   ===================================================================== */
@media (max-width: 720px){
  .mobile-card-table{ min-width:0 !important; }
  .mobile-card-table thead{ display:none; }
  .mobile-card-table, .mobile-card-table tbody{ display:block; width:100%; }

  .mobile-card-table tbody tr{
    display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
    border:1px solid var(--color-divider); border-radius:10px;
    padding:11px 12px; margin:0 0 8px; position:static; left:auto;
  }

  .mobile-card-table tbody td{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:3px 0; border:none; font-size:13.5px;
    position:static; left:auto; z-index:auto; box-shadow:none; background:transparent;
    max-width:none; overflow:visible; text-overflow:unset; white-space:normal;
  }

  /* Первая колонка (имя игрока или дата) — полноширинный заголовок карточки, без обрезки */
  .mobile-card-table tbody td:first-child{
    flex:1 1 100%; font-size:14px; font-weight:700; line-height:1.45;
    justify-content:flex-start; max-width:none; overflow:visible;
  }
  .mobile-card-table tbody td:first-child .player-cell{ max-width:none; gap:8px; }
  .mobile-card-table tbody td:first-child .player-cell .avatar{ width:28px; height:28px; font-size:11px; flex-shrink:0; }
  .mobile-card-table tbody td:first-child .player-cell a.player-link,
  .mobile-card-table tbody td:first-child > a.player-link{
    display:inline; max-width:none; overflow:visible; text-overflow:unset; white-space:normal;
  }

  /* Остальные колонки — строка «подпись: значение» */
  .mobile-card-table tbody td:not(:first-child)::before{
    content:attr(data-label); font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em; color:var(--color-text-muted);
    margin-right:auto; flex-shrink:0;
  }
  .mobile-card-table tbody td:not(:first-child){ text-align:right; }
}

/* =====================================================================
   Узкие экраны: расписание матчей и очередь вызова — карточками.
   Раньше эти таблицы прокручивались вбок с закреплённой первой колонкой,
   и колонка с именами накрывала кнопку «Внести счёт» / «Вызвать».
   ===================================================================== */
@media (max-width: 720px){
  .t-schedule table, .calls-table table{ min-width:0 !important; }
  .t-schedule thead, .calls-table thead{ display:none; }
  .t-schedule table, .t-schedule tbody,
  .calls-table table, .calls-table tbody{ display:block; width:100%; }

  .t-schedule tbody tr, .calls-table tbody tr{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    border:1px solid var(--color-divider); border-radius:10px;
    padding:11px 12px; margin:0 0 8px;
  }
  .t-schedule tbody td, .calls-table tbody td{
    display:block; padding:0; border:none; font-size:13.5px;
  }
  /* закрепление первой колонки на карточках не нужно */
  .t-schedule .sticky-first td:first-child,
  .calls-table .sticky-first td:first-child{
    position:static; left:auto; z-index:auto; box-shadow:none; background:transparent;
  }
  .t-schedule tbody td:first-child, .calls-table tbody td:first-child{
    flex:1 1 100%; font-size:14px; font-weight:700; line-height:1.55;
  }
  .t-schedule tbody td:last-child{ flex:1 1 100%; }
  .t-schedule tbody td:last-child .btn{ width:100%; justify-content:center; }

  .calls-table tbody td:nth-child(2){
    flex:1 1 100%; font-size:12px; color:var(--color-text-muted); white-space:normal;
  }
  .calls-table tbody td:nth-child(3){ flex:0 0 auto; }
  .calls-table tbody td:nth-child(4){ flex:1 1 auto; }
  .calls-table tbody td:nth-child(4) .btn{ width:100%; justify-content:center; }
  .calls-table .call-select{ max-width:none; width:100%; }

  /* подсказка про боковую прокрутку для этих блоков больше не нужна */
  .scroll-hint.hint-cards{ display:none; }
}

/* ============================================================
   Бронирование столов: десктоп-таблица vs мобильный список
   ------------------------------------------------------------
   Обе вёрстки рендерятся в booking.js всегда — здесь только
   переключение видимости по ширине экрана, без пересчёта в JS,
   поэтому поворот экрана/ресайз работает мгновенно.
   ============================================================ */
#booking-grid-wrap-mobile{ display:none; }
@media (max-width:720px){
  #booking-grid-wrap{ display:none; }
  #booking-grid-wrap-mobile{ display:block; }
}

/* Карточки столов — горизонтальная прокрутка на любом экране,
   но на мобильном делаем карточки чуть шире для удобства пальцем */
@media (max-width:520px){
  .bk-table-card{ width:130px !important; }
}

/* Кнопка «Забронировать несколько столов» — на мобильном на всю ширину,
   а не прижата в правый угол ряда навигации по датам */
@media (max-width:600px){
  #booking-daynav > div{ flex-direction:column; align-items:stretch !important; }
  #bk-batch-open-btn{ margin-left:0 !important; width:100%; }
  #bk-day-picker{ width:100%; }
}

/* Форма редактирования стола в админ-панели — под телефон в столбик */
@media (max-width:600px){
  .bk-table-edit-row{ flex-direction:column; }
  .bk-table-edit-row .bk-table-thumb{ width:100%; height:120px; }
}

/* Окно входа администратора — на десктопе это маленькая панель рядом с кнопкой входа,
   но на телефоне такая привязанная к углу позиция неудобна — центрируем как обычное модальное окно. */
@media (max-width:720px){
  #admin-modal-backdrop.open{
    display:flex !important; align-items:center; justify-content:center;
    padding:16px; background:oklch(0 0 0/.45); pointer-events:auto;
  }
  #admin-modal-backdrop .modal{ margin:0 !important; max-width:360px !important; width:100%; }
}

/* Компактная сетка "время × все столы" на мобильном — то же самое, что на десктопе,
   только уже колонки и меньше текста, чтобы все столы были видны с горизонтальным
   скроллом, а не по одному через выпадающий список (как было раньше). */
.bk-grid-compact table{ min-width:0 !important; }
.bk-grid-compact th, .bk-grid-compact td{ padding:8px 10px; font-size:12px; white-space:nowrap; max-width:92px; overflow:hidden; text-overflow:ellipsis; }


/* Выбор игроков во "Имитации матча" — на десктопе это ряд из двух select + кнопки
   обмена местами, но в узком ряду текст в <select> обрезался ("Выберите игр…").
   На мобильном раскладываем в столбик: игрок 1, кнопка обмена по центру, игрок 2. */
@media (max-width:560px){
  .sim-vs-row{ flex-direction:column; align-items:stretch; gap:8px; }
  .sim-vs-row .field{ width:100%; }
  .sim-swap-btn{ align-self:center; transform:rotate(90deg); }
}

/* Вкладки формата матча (бо3/бо5/бо7) — на узких экранах текст "До 4 побед (бо7)"
   не помещается в равные трети ряда и обрезается. Уменьшаем текст и позволяем
   переносить по словам вместо обрезки. */
@media (max-width:420px){
  #sim-format-tabs{ flex-wrap:wrap; }
  #sim-format-tabs .tab{ flex:1 1 30%; font-size:11px; padding:8px 4px; white-space:normal; text-align:center; line-height:1.25; }
}

/* Имя игрока в карточке "Вероятность победы" — на десктопе имя и так помещается
   в одну строку рядом с процентом, но на узкой мобильной колонке длинные ФИО
   (например "Борисенко Владимир") обрезались до "Борисенко Влад…". Под именем
   есть свободное место, поэтому на мобильном разрешаем перенос на 2 строки
   вместо обрезки — это не ломает раскладку карточки. */
@media (max-width:480px){
  .sim-prob-card .sim-prob-name{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.2; }
}