:root {
  --md3-bg: #18122b;
  --md3-surface: #212136;
  --md3-surface-variant: #241c3b;
  --md3-primary: var(--maf-accent-color, #ae8cff);
  --md3-primary-container: #5641a7;
  --md3-secondary: #b9a6e5;
  --md3-outline: #3d315d;
  --md3-error: #ff5370;
  --md3-success: #6fe7b7;
  --md3-on-primary: #fff;
  --md3-on-surface: #f4eeff;
  --md3-shadow: 0 6.9px 27.6px 0 rgba(56, 34, 96, 0.25), 0 1.725px 4.6px 0 rgba(0,0,0,0.32);
  --md3-radius-pill: 25.3px;
  --md3-radius: 16.1px;
  --md3-radius-xs: 9.2px;
  --md3-font: 'Roboto','Akrobat',Arial,sans-serif;
  --md3-ripple: rgba(174,140,255,.18);
  --md3-duration: .2875s;
  --maf-accent-color: #ae8cff;
  --maf-accent-color-rgb: 174,140,255;
  --maf-accent-color-22: rgba(var(--maf-accent-color-rgb), 0.13);
  --maf-accent-color-24: rgba(var(--maf-accent-color-rgb), 0.14);
  --maf-accent-color-2b: rgba(var(--maf-accent-color-rgb), 0.17);
  --maf-accent-color-33: rgba(var(--maf-accent-color-rgb), 0.20);
  --maf-accent-color-44: rgba(var(--maf-accent-color-rgb), 0.27);
  --maf-accent-color-55: rgba(var(--maf-accent-color-rgb), 0.33);
  --maf-accent-color-80: rgba(var(--maf-accent-color-rgb), 0.50);
  --maf-accent-color-88: rgba(var(--maf-accent-color-rgb), 0.53);
  --maf-accent-color-99: rgba(var(--maf-accent-color-rgb), 0.60);
  --maf-accent-color-cc: rgba(var(--maf-accent-color-rgb), 0.80);
  --maf-panel-glow: 0 0 18px 4px var(--maf-accent-color-44), 0 0 1px 0px #31225c, 0 2px 8px #0003;

  --lg-bg-color: rgba(255, 255, 255, 0.25);
  --lg-highlight: rgba(255, 255, 255, 0.75);
  --lg-text: #ffffff;
  --lg-red: #fb4268;
  --lg-grey: #444739;
}

html, body {
  height: 100%;
  width: 100vw;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: var(--maf-gradient-bg, linear-gradient(135deg, #1a1625 0%, #2d1b47 25%, #1f1a3a 50%, #2a1f45 75%, #1a1625 100%));
  color: var(--md3-on-surface);
  font-family: var(--md3-font);
  font-size: 19.55px;
  overflow-x: hidden;
  position: relative;
  /* Исправляем проблемы со скроллом */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Основной контейнер приложения */
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: inherit;
  /* Предотвращаем показ белого фона при скролле */
  position: relative;
}

/* Контент должен заполнять оставшееся пространство */
.players-list {
  flex: 1;
  margin: 0;
  padding: 3.45px 0 100px 0; /* Уменьшаем отступ снизу только для панели режимов */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4.6px;
  scrollbar-gutter: stable;
  /* Улучшаем скролл */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Дополнительный слой затемнения для лучшей читаемости */
html::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15);
  pointer-events: none;
  z-index: -1;
}

/* ========== Модальное окно ========== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(24, 18, 43, 0.45);
  align-items: center !important;
  justify-content: center !important;
  display: flex !important;
  animation: fadeIn var(--md3-duration);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  padding: 5px;
  box-sizing: border-box;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* Единый стиль для всех модальных окон */
.modal-content,
.settings-modal-content,
.voting-modal-content,
.best-move-modal-content,
.theme-modal-content {
  background: rgba(36, 28, 59, 0.85);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  color: var(--md3-on-surface);
  border-radius: 36.8px;
  box-shadow: 0 8px 32px rgba(174,140,255,0.18), 0 0 32px 0 rgba(255,255,255,0.12), var(--md3-shadow);
  width: 460px;
  max-width: calc(100vw - 20px);
  padding: 32px 18px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  animation: slideDown var(--md3-duration);
  border: 2.5px solid var(--lg-highlight);
  position: relative;
  max-height: min(760px, calc(100vh - 20px));
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  text-align: center;
}
@keyframes slideDown { from { transform: translateY(-14%); opacity:0;} to {transform: none; opacity:1;} }

/* Заголовки модальных окон */
.modal-content h2,
.settings-modal-content h2,
.voting-modal-content h2,
.best-move-modal-content h2,
.theme-modal-content h2 {
  font-weight: 900;
  font-size: 1.45em;
  color: var(--maf-accent-color);
  margin: 0 0 16px 0;
  letter-spacing: .7px;
  text-shadow: 0 2px 12px var(--maf-accent-color-22);
}

/* Стилизация скроллбара для всех модальных окон */
.modal-content::-webkit-scrollbar,
.settings-modal-content::-webkit-scrollbar,
.voting-modal-content::-webkit-scrollbar,
.best-move-modal-content::-webkit-scrollbar,
.theme-modal-content::-webkit-scrollbar {
  width: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb,
.settings-modal-content::-webkit-scrollbar-thumb,
.voting-modal-content::-webkit-scrollbar-thumb,
.best-move-modal-content::-webkit-scrollbar-thumb,
.qr-modal-content::-webkit-scrollbar-thumb,
.theme-modal-content::-webkit-scrollbar-thumb {
  background: var(--maf-accent-color-55);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.1);
}

.modal-content::-webkit-scrollbar-thumb:hover,
.settings-modal-content::-webkit-scrollbar-thumb:hover,
.voting-modal-content::-webkit-scrollbar-thumb:hover,
.best-move-modal-content::-webkit-scrollbar-thumb:hover,
.qr-modal-content::-webkit-scrollbar-thumb:hover,
.theme-modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--maf-accent-color);
}

/* ========= Компактные поля ввода ========= */
input[type="text"], input[type="number"], select {
  background: var(--md3-surface-variant);
  color: var(--md3-on-surface);
  border: 2px solid var(--md3-outline);
  border-radius: var(--md3-radius);
  padding: 6.9px 11.5px;
  font-size: 1.127em;
  outline: none;
  min-width: 0;
  max-width: 161px;
  transition: border-color var(--md3-duration), box-shadow var(--md3-duration);
  box-shadow: 0 1.15px 6.9px 0 rgba(56,34,96,.07);
  margin: 0 2.3px;
  appearance: none;
}
input[type="text"]::placeholder,
input[type="number"]::placeholder {
  color: #a59bc7;
  opacity: 1;
  font-size: 1.127em;
}
input[type="text"]:focus, input[type="number"]:focus, select:focus {
  border-color: var(--maf-accent-color, #ae8cff);
  box-shadow: 0 0 0 2.3px var(--maf-accent-color, #ae8cff), 0 1.15px 6.9px 0 rgba(174,140,255,0.07);
}
input[type="radio"] {
  accent-color: var(--maf-accent-color, #ae8cff);
  width: 19.55px; height: 19.55px; margin-right: 5.75px; vertical-align: middle;
}

/* Внутри таблиц игроков — еще компактнее */
.players-list input[type="text"], .players-list select {
  max-width: 94.3px;
  min-width: 50.6px;
  font-size: 1.0695em;
  margin-right: 0;
  padding: 5.75px 6.9px;
  border-radius: var(--md3-radius-xs);
  margin-left: 2.3px;
}
.players-list select {
  background: var(--md3-surface-variant);
  color: var(--md3-on-surface);
  border: 1.5px solid var(--md3-outline);
  transition: border-color var(--md3-duration);
}
.players-list select:focus { border-color: var(--md3-primary); }

/* ===== Кнопки Liquid Glass ===== */
.glass-btn {
  background: var(--lg-bg-color, rgba(255,255,255,0.25));
  color: var(--lg-text, #fff);
  border: none;
  border-radius: 2rem;
  padding: 0.7em 2.2em;
  font-weight: 700;
  font-size: 1.13em;
  box-shadow: 0 6px 16px 0 rgba(0,0,0,0.18), 0 1.15px 6.9px 0 rgba(56,34,96,.07);
  cursor: pointer;
  outline: none;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-width: 120px;
}
.glass-btn:hover, .glass-btn:focus {
  background: var(--maf-accent-color);
  color: #fff;
  box-shadow: 0 8px 32px 0 var(--maf-accent-color-22), 0 6px 16px 0 rgba(0,0,0,0.18);
}
.glass-btn:active {
  background: var(--maf-accent-color);
  color: #fff;
}

/* ========== Панель выбора игры и стола (перенесена под кнопки настроек) ========== */
.game-table-panel {
  background: rgba(36, 28, 59, 0.95);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--md3-outline);
  border-radius: var(--md3-radius);
  padding: 16px;
  margin: 16px auto;
  max-width: 480px;
  position: static;
  z-index: 1;
  flex-shrink: 0;
}

.game-table-panel .flex {
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.game-table-panel .label {
  font-weight: 600;
  color: #b9a6e5;
  margin-right: 8px;
  font-size: 1.0em;
  white-space: nowrap;
}

.game-table-panel select {
  background: var(--md3-surface-variant);
  border: 1.5px solid var(--md3-outline);
  border-radius: 12px;
  color: var(--md3-on-surface);
  padding: 8px 12px;
  font-size: 0.95em;
  min-width: 100px;
  transition: all 0.2s ease;
}

.game-table-panel select:focus {
  outline: none;
  border-color: var(--maf-accent-color);
  box-shadow: 0 0 0 2px rgba(174,140,255,0.2);
}

/* ========== Верхняя панель (удалена) ========== */
/* ========== Блоки с игроками ========== */
/* Стили уже обновлены выше */

@media (max-width: 440px) {
  .players-list { gap: 2px; }
}

.players-list > * {
  display: flex;
  align-items: center;
  background: var(--md3-surface-variant);
  border: 1.495px solid var(--md3-outline);
  border-radius: var(--md3-radius-pill);
  box-shadow: 0 1.15px 9.2px 0 rgba(56,34,96,0.09);
  padding: 5.75px 4.6px 5.75px 8.05px;
  gap: 6.9px;
  min-height: 39.1px;
  position: relative;
  transition: border-color var(--md3-duration), box-shadow var(--md3-duration), background var(--md3-duration);
  animation: fadeIn var(--md3-duration) cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.players-list > * .avatar {
  margin-right: 0;
  box-shadow: 0 1.15px 6.9px 0 rgba(174,140,255,0.09);
  border: 1.3px solid var(--md3-outline);
  background: #2a2340;
  transition: border-color var(--md3-duration);
}
.avatar {
  width: 36.8px;
  height: 36.8px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 1.15px 6.9px 0 rgba(174,140,255,0.07);
  position: relative;
}
.avatar-uploader {
  position: relative;
  width: 36.8px; height: 36.8px;
}
.avatar-x {
  position: absolute;
  top: -8.05px; right: -8.05px;
  width: 20.7px; height: 20.7px;
  background: var(--md3-error);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.8px;
  box-shadow: 0 1.15px 6.9px 0 rgba(255,83,112,0.13);
  opacity: 0.93;
  z-index: 2;
  cursor: pointer;
  transition: background var(--md3-duration);
}
.avatar-x:hover { background: #ff7fa3; }
.hovered {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(120deg, var(--md3-primary-container) 0 100%);
  opacity: 0.0;
  color: var(--md3-on-primary);
  border-radius: 50%;
  pointer-events: none;
  transition: opacity var(--md3-duration);
}
.avatar-uploader:hover .hovered,
.avatar-uploader:focus-within .hovered {
  opacity: 0.82;
  pointer-events: all;
  cursor: pointer;
}
.avatar-uploader .hovered i { font-size: 14px; }
.avatar-uploader input[type="file"] { display: none; }

.players-list > * .flex-fixed {
  flex-shrink: 0;
  min-width: 25px;
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 74.75px;
  max-width: 115px;
  flex-shrink: 0;
  font-size: 1.127em;
  margin-left: 5.75px;
  margin-right: 5.75px;
}

.player-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 0;
  border-radius: 12px;
  margin-bottom: 4px;
  transition: box-shadow 0.2s, border 0.2s, background 0.2s, min-height 0.25s, padding-bottom 0.25s;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px) saturate(1.1); /* Добавляем размытие фона */
  -webkit-backdrop-filter: blur(8px) saturate(1.1); /* Поддержка Safari */
  box-sizing: border-box;
  min-height: 39.1px; /* вернуть прежний размер */
  padding-bottom: 0;   /* вернуть прежний отступ */
  position: relative;
  flex-direction: column; /* Содержимое и панель — вертикально */
  align-items: stretch;
}
.player-row-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  /* ...existing code for row layout... */
}
.player-row.highlighted {
  min-height: 155px;
  /* padding-bottom: 0; не нужен */
  transition: min-height 0.25s, box-shadow 0.2s, border 0.2s;
}

/* Полупрозрачная строка неактивного игрока */
.player-inactive,
.player-row.killed,
.player-row.voted,
.player-row.removed,
.player-row.tech-fall-removed,
.player-row.fall-removed {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(1) brightness(0.75);
  transition: filter 0.5s, opacity 0.5s;
}

/* Только кнопка "Вернуть игрока" активна */
.player-inactive .return-btn,
.player-row.killed .return-btn,
.player-row.voted .return-btn,
.player-row.removed .return-btn,
.player-row.tech-fall-removed .return-btn,
.player-row.fall-removed .return-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
  filter: none !important;
}

/* Неактивные кнопки внутри неактивного игрока */
.player-inactive button:not(.return-btn),
.player-inactive .glass-btn:not(.return-btn),
.player-row.killed button:not(.return-btn),
.player-row.killed .glass-btn:not(.return-btn),
.player-row.voted button:not(.return-btn),
.player-row.voted .glass-btn:not(.return-btn),
.player-row.removed button:not(.return-btn),
.player-row.removed .glass-btn:not(.return-btn),
.player-row.tech-fall-removed button:not(.return-btn),
.player-row.tech-fall-removed .glass-btn:not(.return-btn),
.player-row.fall-removed button:not(.return-btn),
.player-row.fall-removed .glass-btn:not(.return-btn) {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(0.5);
}

/* Кнопки ролей Д М Ш в строку */
.role-badges-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 12px;
  flex-direction: row;
  min-width: 140px;
  justify-content: flex-end;
}
.role-badges-right > * {
  min-width: 38px;
  max-width: 38px;
  flex: 0 0 38px;
  text-align: center;
  margin-left: 2px;
  margin-right: 2px;
  box-sizing: border-box;
}
.role-badges-right .role-button {
  display: inline-block;
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  min-height: 44px;
  max-height: 44px;
  border-radius: 50%;
  font-size: 1.18em;
  margin: 0 2px;
  background: var(--lg-bg-color, rgba(255,255,255,0.25));
  color: var(--maf-role-btn-text, var(--lg-text, #fff));
  border: 2px solid var(--maf-accent-color, #ae8cff);
  box-shadow: 0 2px 8px 0 var(--maf-accent-color-44, rgba(174,140,255,0.27));
  transition: background 0.22s, color 0.22s, border-color 0.22s, box-shadow 0.22s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 0;
  line-height: 44px;
  text-align: center;
  vertical-align: middle;
}

/* ===== M3e Switch стиль ===== */
.switch-row {
  display: flex;
  justify-content: center;
  margin: 11.5px 0 4.6px 0;
}
.m3e-switch {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 7px 0;
  min-height: 48px;
}
.m3e-switch input[type="checkbox"] {
  display: none;
}
.m3e-switch .slider {
  width: 54px;
  height: 32px;
  background: var(--md3-outline);
  border-radius: 22px;
  position: relative;
  margin-right: 14px;
  transition: background .253s;
}
.m3e-switch .slider:before {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 24px;
  height: 24px;
  background: var(--md3-bg);
  border-radius: 50%;
  transition: transform .253s, background .253s;
}
.m3e-switch input[type="checkbox"]:checked + .slider {
  background: var(--md3-primary);
}
.m3e-switch input[type="checkbox"]:checked + .slider:before {
  transform: translateX(20px);
  background: var(--md3-on-primary);
}
.m3e-switch .switch-label {
  color: var(--md3-on-surface);
  font-weight: 600;
  font-size: 1.35em;
  letter-spacing: .23px;
  margin-left: 8px;
  min-height: 32px;
  display: flex;
  align-items: center;
}

/* ===== Кнопочный ripple ===== */
input[type="button"], .md3-btn, .player-button, .role-button, button.role-button, input.role-button {
  position: relative;
  overflow: hidden;
}
input[type="button"]:after, .md3-btn:after, .player-button:after, .role-button:after, button.role-button:after, input.role-button:after {
  content: '';
  display: block;
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  inset: 0;
  opacity: 0;
  background: var(--md3-ripple);
  transition: opacity .34s;
}
input[type="button"]:active:after,
.md3-btn:active:after,
.player-button:active:after,
.role-button:active:after,
button.role-button:active:after,
input.role-button:active:after {
  opacity: 1;
  transition: none;
}

/* ========== Новые стили ========== */

/* Кнопки выбора режима игры */
.mode-select-buttons {
  display: flex;
  flex-direction: row;
  gap: 18px;
  margin: 12px 0 0 0;
  justify-content: center;
  width: 100%;
}
.mode-btn {
  background: #241c3b;
  border: 2px solid var(--maf-accent-color);
  border-radius: 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
  width: 180px !important;
  height: 100px !important;
  justify-content: center;
}
.mode-btn.selected, .mode-btn:focus {
  border-color: #fff;
  background: var(--maf-accent-color-22);
}
.mode-btn img {
  width: 170px !important;
  height: 90px !important;;
  object-fit: contain;
  margin: 0;
  padding: 0;
}

/* Кнопка "Загрузить турнир" как кнопка "Войти" */
.modal-fields input[type="button"][value="Загрузить турнир"] {
  background: var(--maf-accent-color);
  color: var(--md3-on-primary);
  border: none;
  border-radius: 14px !important;
  padding: 0 24px !important;
  min-height: 56px;
  min-width: 160px;
  max-width: 100%;
  font-weight: 700;
  font-size: 1.18em;
  box-shadow: var(--md3-shadow);
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transition: background var(--md3-duration), color var(--md3-duration), border-color var(--md3-duration);
}
.modal-fields input[type="button"][value="Загрузить турнир"]:hover,
.modal-fields input[type="button"][value="Загрузить турнир"]:focus {
  border-color: var(--maf-accent-color);
  box-shadow: 0 6px 24px 0 var(--maf-accent-color-24), var(--md3-shadow);
}

/* Кнопки в модальных окнах на всю ширину */
.modal-fields input[type="button"] {
  width: 100%;
  min-width: 160px;
  max-width: 100%;
  box-sizing: border-box;
}

/* ===== Блоки внизу ===== */
.bottom-fields {
  margin-top: 16.1px;
  padding: 11.5px 0 0 0;
  border-top: 1.15px solid var(--md3-outline, #3d315d);
}
.bottom-fields .md3-btn {
  margin-bottom: 10px;
}
.bottom-inputs {
  gap: 8.05px;
  flex-wrap: wrap;
  margin-bottom: 11.5px;
}
.input-compact {
  min-width: 0;
  width: 138px;
  padding: 6.9px 11.5px;
  font-size: 1.1155em;
  border-radius: var(--md3-radius-xs);
  border: 1.495px solid var(--md3-outline);
  background: var(--md3-surface-variant);
}
.input-compact::placeholder {
  color: #a59bc7;
  opacity: 1;
}

/* ===== Скролл ===== */
::-webkit-scrollbar { width: 8.05px; background: var(--md3-bg); }
::-webkit-scrollbar-thumb { background: var(--md3-surface-variant); border-radius: 11.5px; }
@media (max-width: 420px) {
  #app { max-width: 100vw; }
  
  /* Отступы только для panel.html */
  body:not(.roles-page) .players-list { 
    gap: 1px;
    margin-top: 65px !important;
    padding-top: 10px;
  }
  
  /* Обычные стили для roles.html */
  body.roles-page .players-list,
  .players-list { 
    gap: 1px;
  }
  
  /* Модальные окна для panel.html */
  body:not(.roles-page) .modal-content,
  body:not(.roles-page) .settings-modal-content,
  body:not(.roles-page) .voting-modal-content,
  body:not(.roles-page) .best-move-modal-content,
  body:not(.roles-page) .qr-modal-content,
  body:not(.roles-page) .theme-modal-content { 
    width: 460px; 
    max-width: calc(100vw - 20px);
    padding: 24px 16px 16px 16px;
    max-height: min(760px, calc(100vh - 85px));
    margin-top: 65px !important;
  }
  
  /* Модальные окна для всех страниц (базовые стили) */
  .modal-content,
  .settings-modal-content,
  .voting-modal-content,
  .best-move-modal-content,
  .qr-modal-content,
  .theme-modal-content { 
    width: 460px; 
    max-width: calc(100vw - 20px);
    padding: 24px 16px 16px 16px;
    max-height: min(760px, calc(100vh - 20px));
  }
  
  /* Мобильные стили для кнопок 1-10 */
  .modal-btn,
  .candidate-btn,
  .voting-btn {
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 1.05em !important;
  }
  
  /* Мобильная сетка для модальных окон: 3x3 + кнопка 10 */
  .modal-grid {
    grid-template-columns: repeat(3, 48px) !important;
    grid-template-rows: repeat(4, 48px) !important;
    gap: 10px 14px !important;
    max-width: 200px !important;
  }
  
  /* Мобильная сетка для кандидатов: 5x2 */
  .candidate-grid {
    grid-template-columns: repeat(5, 48px) !important;
    grid-template-rows: repeat(2, 48px) !important;
    gap: 10px 14px !important;
    max-width: 360px !important;
  }
  
  /* Кнопка 10 в четвертой строке по центру на мобильных */
  .modal-grid .modal-btn:nth-child(10) {
    grid-column: 2 / 3 !important;
    grid-row: 4 / 5 !important;
  }
}


/* Центрирование номера игрока между краем и аватаркой */
.player-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  font-size: 1.18em;
  font-weight: 700;
  margin: 0;
  padding: 0;
  text-align: center;
  /* чтобы не прилипал к краю */
}

/* Кнопка настроек внизу */
.settings-btn-container {
  display: flex;
  justify-content: center;
  z-index: 1200;
  margin-top: 32px;
  margin-bottom: 32px;
  width: 100%;
  gap: 18px;
}
.settings-btn,
.themes-btn {
  background: var(--md3-surface);
  color: var(--maf-accent-color);
  border: 2px solid var(--maf-accent-color);
  border-radius: 32px;
  padding: 10px 22px;
  font-size: 1.18em;
  font-weight: 700;
  box-shadow: var(--md3-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0;
  pointer-events: all;
  transition: background var(--md3-duration), color var(--md3-duration), border-color var(--md3-duration);
  min-width: 0;
  min-height: 0;
  justify-content: center;
}
.settings-btn i,
.themes-btn i {
  margin: 0;
  padding: 0;
  font-size: 1.45em;
  line-height: 1;
  display: block;
}
.settings-btn:hover, .settings-btn:focus,
.themes-btn:hover, .themes-btn:focus {
  background: var(--maf-accent-color);
  color: var(--md3-on-primary);
  border-color: var(--maf-accent-color-80);
}
.settings-btn:hover i,
.settings-btn:focus i {
  color: #fff !important;
}
.themes-btn:hover i,
.themes-btn:focus i {
  color: #fff700 !important;
}

/* Поля ввода в модальных окнах */
.modal-fields {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.modal-fields input[type="text"],
.modal-fields input[type="number"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 1.35em;
  letter-spacing: 0.12em;
  font-weight: 700;
  width: 70%;
  min-width: 120px;
  max-width: 260px;
}

/* Стилизация кнопки "Войти" как md3-btn */
.modal-content input[type="button"][value="Войти"] {
  /* Наследует стили md3-btn */
  background: var(--maf-accent-color, #ae8cff);
  color: var(--md3-on-primary);
  border: none;
  border-radius: 14px !important;
  padding: 0 24px !important;
  min-height: 56px;
  min-width: 160px;
  max-width: 100%;
  font-weight: 700;
  font-size: 1.18em;
  box-shadow: var(--md3-shadow);
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transition: background var(--md3-duration), color var(--md3-duration), border-color var(--md3-duration);
}

.modal-content input[type="button"][value="Войти"]:hover,
.modal-content input[type="button"][value="Войти"]:focus {
  background: var(--md3-primary-container);
  color: var(--md3-on-primary);
  border-color: var(--maf-accent-color, #ae8cff);
  box-shadow: 0 6px 24px 0 var(--maf-accent-color, #ae8cff24), var(--md3-shadow);
}

/* --- Стили из panel.html --- */
.player-row.highlighted {
    box-shadow: 0 0 0 4px var(--maf-accent-color), 0 0 16px 6px rgba(174,140,255,0.50);
    border: 3px solid var(--maf-accent-color);
    z-index: 10;
    border-radius: 18px;
}
.players-list {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.player-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 0;
    border-radius: 12px;
    margin-bottom: 4px;
    transition: box-shadow 0.2s, border 0.2s, background 0.2s, min-height 0.25s, padding-bottom 0.25s;
    background: rgba(255,255,255,0.04);
    box-sizing: border-box;
    min-height: 39.1px; /* вернуть прежний размер */
    padding-bottom: 0;   /* вернуть прежний отступ */
    position: relative;
}
.player-row.highlighted {
    min-height: 155px; /* увеличить высоту для панели */
    padding-bottom: 0; /* убираем лишний padding-bottom */
    transition: min-height 0.25s, box-shadow 0.2s, border 0.2s;
}

/* Поля ввода в модальных окнах */
.modal-fields {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.modal-fields input[type="text"],
.modal-fields input[type="number"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 1.35em;
  letter-spacing: 0.12em;
  font-weight: 700;
  width: 70%;
  min-width: 120px;
  max-width: 260px;
}

/* Liquid Glass Navigation Bar */
.glass-content--nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--lg-bg-color, rgba(255,255,255,0.25));
  border-radius: 2.5rem;
  box-shadow: 0 6px 6px rgba(0,0,0,0.2), 0 0 20px rgba(0,0,0,0.1);
  padding: 0.5rem 1.5rem;
  margin: 0 auto 0.5rem auto;
  max-width: 480px;
  position: static; /* Убираем фиксированное позиционирование */
  backdrop-filter: blur(4px);
}

.glass-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--lg-grey, #444739);
  transition: color 0.3s cubic-bezier(.6,0,.3,1), background 0.35s cubic-bezier(.6,0,.3,1), box-shadow 0.35s cubic-bezier(.6,0,.3,1);
  cursor: pointer;
  padding: 0.5rem 1.2rem;
  border-radius: 2rem;
  font-size: 1.08em;
  background: transparent;
  border: none;
  outline: none;
  position: relative;
  z-index: 1;
}

.glass-item svg {
  fill: var(--lg-grey, #444739);
  height: 32px;
  margin-bottom: 0.15rem;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.25));
  transition: transform 0.25s, fill 0.25s;
}

.glass-item--active {
  background: rgba(0,0,0,0.18);
  color: var(--maf-accent-color);
  box-shadow: 0 2px 12px 0 var(--maf-accent-color-22);
  transition: color 0.3s cubic-bezier(.6,0,.3,1), background 0.35s cubic-bezier(.6,0,.3,1), box-shadow 0.35s cubic-bezier(.6,0,.3,1);
}

.glass-item--active svg {
  fill: var(--maf-accent-color);
}

.glass-item--active::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  border-radius: 2rem;
  background: linear-gradient(90deg, var(--maf-accent-color-22) 0%, var(--maf-accent-color-44) 100%);
  box-shadow: 0 2px 12px 0 var(--maf-accent-color-22);
  z-index: -1;
  opacity: 1;
}

.glass-item:not(.glass-item--active)::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  border-radius: 2rem;
  background: transparent;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(.6,0,.3,1), background 0.35s cubic-bezier(.6,0,.3,1);
}

/* --- Нижняя панель режимов: фиксируем внизу, отступы --- */
#bottom-bar.glass-content--nav {
  position: fixed !important;
  left: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  z-index: 9999 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 0;
  background: var(--lg-bg-color, rgba(24,18,43,0.85));
  box-shadow: 0 6px 16px 0 rgba(0,0,0,0.18);
  border-radius: 2.5rem;
  min-height: 0;
  height: auto;
  width: auto;
  max-width: calc(100vw - 4px);
  pointer-events: auto;
}
#bottom-bar {
  position: fixed !important;
  left: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  z-index: 9999 !important;
  width: auto;
  max-width: calc(100vw - 4px);
  pointer-events: auto;
  margin: 0;
}
body { padding-bottom: 80px !important; }

/* Кнопки кандидатов: две строки по 5, центрирование */
.candidate-grid {
    display: grid;
    grid-template-columns: repeat(5, 54px);
    grid-template-rows: repeat(2, 54px);
    gap: 14px 18px;
    width: 100%;
    max-width: 420px;
    margin: 16px auto;
    justify-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;
}

/* Сетка модальных окон (голосование, лучший ход): 3x3 + кнопка 10 по центру в 4-й строке */
.modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 54px);
    grid-template-rows: repeat(4, 54px);
    gap: 14px 18px;
    width: 100%;
    max-width: 250px;
    margin: 16px auto;
    justify-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;
}

/* Кнопка 10 в четвертой строке по центру */
.modal-grid .modal-btn:nth-child(10) {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}

/* Liquid Glass для всех модальных окон */
.modal-content, .settings-modal-content, .best-move-modal-content, .winner-modal-content {
    background: rgba(36, 28, 59, 0.55) !important;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    color: var(--md3-on-surface);
    border-radius: 36.8px;
    box-shadow: 0 8px 32px rgba(174,140,255,0.18), 0 0 32px 0 rgba(255,255,255,0.12), var(--md3-shadow);
    border: 2.5px solid var(--lg-highlight);
}

/* Центрирование заголовков */
.modal-content h2, .settings-modal-content h2, .best-move-modal-content h2, .winner-modal-content h2 {
    text-align: center !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Кнопка закрытия - полностью скрыта */
.modal-close,
.settings-modal-close,
.voting-close-btn,
button[class*="close"]:not(.glass-btn),
button[class*="Close"]:not(.glass-btn),
*[class*="modal-close"],
*[class*="close-btn"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

/* Дополнительное скрытие всех элементов с крестиками */
*:contains("×"),
button:contains("×"),
span:contains("×"),
div:contains("×"),
*[title*="Закрыть"],
*[title*="закрыть"],
*[title*="Close"],
*[title*="close"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Псевдо-элементы с крестиками */
.modal::before,
.modal::after,
.modal-content::before,
.modal-content::after {
  content: none !important;
}

/* Скрытие по позиции (кнопки закрытия обычно в правом верхнем углу) */
.modal button[style*="position: absolute"][style*="top:"],
.modal button[style*="position: absolute"][style*="right:"],
.modal-content button[style*="position: absolute"][style*="top:"],
.modal-content button[style*="position: absolute"][style*="right:"] {
  display: none !important;
}

/* Исключения для нужных кнопок */
.modal-content .glass-btn,
.settings-modal-content .glass-btn,
.voting-modal-content .glass-btn,
.best-move-modal-content .glass-btn,
.theme-modal-content .glass-btn,
.modal-btn,
.candidate-btn,
.voting-btn,
button:contains("Войти"),
button:contains("Загрузить"),
button:contains("Создать"),
button:contains("Принять"),
input[type="button"][value="Войти"],
*[onclick*="joinRoom"],
*[onclick*="loadTournament"],
*[onclick*="createManualTable"] {
  display: initial !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: static !important;
}

/* Принудительное скрытие через инлайн стили */

/* Специфичные селекторы для каждого модального окна - только для кнопок закрытия */

/* JavaScript решение - будет применяться программно */
.js-hide-close-buttons .modal button,
.js-hide-close-buttons .modal-content button {
  display: none !important;
}

.js-hide-close-buttons .modal .glass-btn,
.js-hide-close-buttons .modal-content .glass-btn {
  display: initial !important;
}

/* ========== Дополнительные утилиты для модальных окон ========== */

/* Контейнер для прокрутки внутри модальных окон */
.modal-scroll {
  width: 100%;
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Класс для модальных окон с фиксированной высотой */
.modal-fixed-height {
  max-height: 80vh;
  overflow: hidden;
}

/* Класс для модальных окон с полной прокруткой */
.modal-full-scroll {
  max-height: calc(100vh - 20px);
  overflow-y: auto;
}

/* Контейнер для действий по центру */
.modal-actions-center {
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin-top: 16px;
}

/* Контейнер для действий с равномерным распределением */
.modal-actions-spread {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-top: 16px;
}

/* Контейнер для действий в столбец */
.modal-actions-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
}

/* Анимация появления кнопок */
div .modal-btn,
div .candidate-btn,
div .voting-btn,
.modal-grid .modal-btn,
.candidate-grid .candidate-btn,
.modal .modal-btn,
.modal .candidate-btn,
.modal .voting-btn {
  animation: buttonFadeIn 0.3s cubic-bezier(.6,0,.3,1) forwards !important;
  opacity: 1 !important; /* Исправлено: видимые кнопки */
}

@keyframes buttonFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Анимационная задержка для красивого появления */
.modal-btn:nth-child(1) { animation-delay: 0.05s; }
.modal-btn:nth-child(2) { animation-delay: 0.1s; }
.modal-btn:nth-child(3) { animation-delay: 0.15s; }
.modal-btn:nth-child(4) { animation-delay: 0.2s; }
.modal-btn:nth-child(5) { animation-delay: 0.25s; }
.modal-btn:nth-child(6) { animation-delay: 0.3s; }
.modal-btn:nth-child(7) { animation-delay: 0.35s; }
.modal-btn:nth-child(8) { animation-delay: 0.4s; }
.modal-btn:nth-child(9) { animation-delay: 0.45s; }
.modal-btn:nth-child(10) { animation-delay: 0.5s; }

.candidate-btn:nth-child(1) { animation-delay: 0.05s; }
.candidate-btn:nth-child(2) { animation-delay: 0.1s; }
.candidate-btn:nth-child(3) { animation-delay: 0.15s; }
.candidate-btn:nth-child(4) { animation-delay: 0.2s; }
.candidate-btn:nth-child(5) { animation-delay: 0.25s; }
.candidate-btn:nth-child(6) { animation-delay: 0.3s; }
.candidate-btn:nth-child(7) { animation-delay: 0.35s; }
.candidate-btn:nth-child(8) { animation-delay: 0.4s; }
.candidate-btn:nth-child(9) { animation-delay: 0.45s; }
.candidate-btn:nth-child(10) { animation-delay: 0.5s; }

/* Убираем анимацию для disabled кнопок */
.modal-btn:disabled,
.candidate-btn:disabled,
.voting-btn:disabled {
  animation: none;
  opacity: 0.4;
}

/* ========== ЭКСТРЕННОЕ ИСПРАВЛЕНИЕ ВИДИМОСТИ КНОПОК ========== */
/* Абсолютная максимальная специфичность для принудительной видимости */

button.modal-btn,
button.candidate-btn, 
button.voting-btn,
.modal button,
.modal-grid button,
.candidate-grid button {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  background: rgba(255,255,255,0.5) !important;
  border: 2px solid #ae8cff !important;
  border-radius: 50% !important;
  width: 54px !important;
  height: 54px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.15em !important;
}

/* Убираем проблемную анимацию opacity */
button.modal-btn,
button.candidate-btn,
button.voting-btn {
  animation: none !important;
}

/* ========== ЭФФЕКТ ВЫБРАННОЙ КНОПКИ ========== */
/* Улучшенное состояние selected для кнопок 1-10 */
button.modal-btn.selected,
button.candidate-btn.selected,
button.voting-btn.selected,
.modal-grid button.selected,
.candidate-grid button.selected,
div .modal-btn.selected,
div .candidate-btn.selected,
div .voting-btn.selected {
  background: linear-gradient(135deg, #ae8cff 0%, rgba(174,140,255,0.95) 100%) !important;
  color: #fff !important;
  border: 3px solid #ae8cff !important;
  box-shadow: 
    0 0 0 4px rgba(174,140,255,0.4), 
    0 8px 24px 0 rgba(174,140,255,0.6),
    0 0 20px 6px rgba(174,140,255,0.5),
    inset 0 2px 0 rgba(255,255,255,0.5) !important;
  transform: scale(1.12) !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7) !important;
  animation: selectedPulse 0.4s ease-out !important;
  z-index: 10 !important;
  position: relative !important;
}

@keyframes selectedPulse {
  0% {
    transform: scale(1);
    box-shadow: 
      0 0 0 0 rgba(174,140,255,0.4),
      0 4px 12px 0 rgba(0,0,0,0.15);
  }
  50% {
    transform: scale(1.18);
    box-shadow: 
      0 0 0 8px rgba(174,140,255,0.7),
      0 16px 40px 0 rgba(174,140,255,0.8);
  }
  100% {
    transform: scale(1.12);
    box-shadow: 
      0 0 0 4px rgba(174,140,255,0.4),
      0 8px 24px 0 rgba(174,140,255,0.6);
  }
}

/* ========== УНИФИКАЦИЯ ДИЗАЙНА ОСНОВНЫХ КНОПОК ========== */
/* Кнопки: Войти, Загрузить турнир, Принять, Завершить голосование, Принять ЛХ */
/* ИСКЛЮЧАЕМ кнопки ролей (.role-button) из унификации */

.glass-btn,
.modal-content input[type="button"],
.modal-fields input[type="button"],
input[type="button"][value="Войти"],
input[type="button"][value="Загрузить турнир"],
input[type="button"][value="Принять"],
input[type="button"][value="Завершить голосование"],
input[type="button"][value="Принять ЛХ"],
button.glass-btn {
  /* Liquid Glass базовый стиль */
  background: rgba(255,255,255,0.25) !important;
  color: #fff !important;
  border: 2px solid #ae8cff !important;
  border-radius: 2rem !important;
  padding: 0.8em 2.4em !important;
  font-weight: 700 !important;
  font-size: 1.15em !important;
  box-shadow: 
    0 6px 20px 0 rgba(0,0,0,0.2), 
    0 2px 8px 0 rgba(174,140,255,0.15),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.3s cubic-bezier(.6,0,.3,1) !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
  min-width: 140px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5em !important;
  margin: 8px auto !important;
}

.glass-btn:hover,
.modal-content input[type="button"]:hover,
.modal-fields input[type="button"]:hover,
input[type="button"][value="Войти"]:hover,
input[type="button"][value="Загрузить турнир"]:hover,
input[type="button"][value="Принять"]:hover,
input[type="button"][value="Завершить голосование"]:hover,
input[type="button"][value="Принять ЛХ"]:hover,
button.glass-btn:hover {
  background: linear-gradient(135deg, #ae8cff 0%, rgba(174,140,255,0.85) 100%) !important;
  color: #fff !important;
  border-color: #ae8cff !important;
  box-shadow: 
    0 10px 30px 0 rgba(174,140,255,0.4), 
    0 6px 16px 0 rgba(0,0,0,0.25),
    inset 0 2px 0 rgba(255,255,255,0.4),
    0 0 0 2px rgba(174,140,255,0.3) !important;
  transform: translateY(-3px) scale(1.03) !important;
}

.glass-btn:active,
.modal-content input[type="button"]:active,
.modal-fields input[type="button"]:active,
input[type="button"][value="Войти"]:active,
input[type="button"][value="Загрузить турнир"]:active,
input[type="button"][value="Принять"]:active,
input[type="button"][value="Завершить голосование"]:active,
input[type="button"][value="Принять ЛХ"]:active,
button.glass-btn:active {
  transform: translateY(-1px) scale(0.98) !important;
  box-shadow: 
    0 4px 12px 0 rgba(174,140,255,0.3),
    0 2px 6px 0 rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
  transition: all 0.15s cubic-bezier(.6,0,.3,1) !important;
}

/* ========== ПРИНУДИТЕЛЬНОЕ СОХРАНЕНИЕ КРУГЛЫХ КНОПОК РОЛЕЙ ========== */
/* Кнопки ролей Д М Ш остаются круглыми и не затрагиваются унификацией */

.role-badges-right .role-button,
button.role-button,
input.role-button {
  /* Принудительно сохраняем круглую форму */
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  /* НЕ применяем стили унификации к кнопкам ролей */
  padding: 0 !important;
  line-height: 44px !important;
  text-align: center !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

/* ========== АКТИВНОЕ СОСТОЯНИЕ КНОПОК РОЛЕЙ ========== */
/* Стиль для выбранных кнопок ролей (Д, М, Ш) */

.role-badges-right .role-button.active,
button.role-button.active,
input.role-button.active,
.glass-btn.role-button.active {
  /* Яркий активный стиль для выбранной роли */
  background: linear-gradient(135deg, 
    var(--maf-accent-color) 0%, 
    rgba(130, 87, 229, 0.8) 50%, 
    var(--maf-accent-color) 100%) !important;
  
  /* Светящийся контур */
  box-shadow: 
    0 0 0 2px rgba(130, 87, 229, 0.6),
    0 0 12px rgba(130, 87, 229, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  
  /* Увеличенный размер для выделения */
  transform: scale(1.1) !important;
  
  /* Белый текст для контраста */
  color: #ffffff !important;
  
  /* Плавная анимация */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  
  /* Z-index для поднятия над другими элементами */
  z-index: 10 !important;
  position: relative !important;
}

/* Эффект при наведении на активную кнопку роли */
.role-badges-right .role-button.active:hover,
button.role-button.active:hover,
input.role-button.active:hover,
.glass-btn.role-button.active:hover {
  background: linear-gradient(135deg, 
    rgba(130, 87, 229, 0.9) 0%, 
    var(--maf-accent-color) 50%, 
    rgba(130, 87, 229, 0.9) 100%) !important;
  
  box-shadow: 
    0 0 0 2px rgba(130, 87, 229, 0.8),
    0 0 16px rgba(130, 87, 229, 0.6),
    0 6px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  
  transform: scale(1.15) !important;
}

/* Эффект нажатия на активную кнопку роли */
.role-badges-right .role-button.active:active,
button.role-button.active:active,
input.role-button.active:active,
.glass-btn.role-button.active:active {
  transform: scale(1.05) !important;
  transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Стиль для кнопок игроков, которые уже проголосовали за других кандидатов */
button.modal-btn.voted-elsewhere,
button.candidate-btn.voted-elsewhere,
button.voting-btn.voted-elsewhere,
.modal-grid button.voted-elsewhere {
  opacity: 0.4 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Стили для вкладок истории голосований в стиле браузерных вкладок */
.voting-tabs-container {
    margin-bottom: 20px;
}

.voting-tabs {
    display: flex;
    background: rgba(0,0,0,0.2);
    border-radius: 12px 12px 0 0;
    padding: 6px 6px 0 6px;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    overflow-x: auto;
    min-height: 40px;
}

.voting-tab {
    position: relative;
    padding: 10px 20px;
    margin-right: 4px;
    background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.08));
    border: 1px solid rgba(255,255,255,0.15);
    color: #b9a6e5;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px 12px 0 0;
    font-size: 0.95em;
    font-weight: 600;
    min-width: 70px;
    max-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 2px 8px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.1);
    border-bottom: none;
    margin-bottom: -2px;
    backdrop-filter: blur(10px);
}

.voting-tab:hover {
    background: linear-gradient(145deg, rgba(174,140,255,0.25), rgba(174,140,255,0.15));
    color: var(--maf-accent-color);
    transform: translateY(-2px);
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.15);
}

.voting-tab.active {
    background: linear-gradient(145deg, var(--md3-surface), rgba(33,33,54,0.95));
    color: var(--maf-accent-color);
    font-weight: 700;
    z-index: 10;
    box-shadow: 
        0 6px 16px rgba(0,0,0,0.3),
        0 0 0 2px rgba(174,140,255,0.4),
        inset 0 1px 0 rgba(255,255,255,0.2);
    border: 1px solid rgba(174,140,255,0.5);
    border-bottom: 2px solid var(--md3-surface);
    transform: translateY(-3px);
}

.tab-title {
    display: block;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.tab-close {
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 50%;
    font-size: 0.8em;
    opacity: 0.7;
    transition: all 0.2s ease;
    background: rgba(255,255,255,0.1);
}

.tab-close:hover {
    background: rgba(255,83,112,0.8);
    color: white;
    opacity: 1;
    transform: scale(1.1);
}

.voting-session {
    padding: 20px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
}

/* Стиль для кнопок неактивных игроков в панели кандидатов */
button.candidate-btn.candidate-inactive,
.candidate-grid button.candidate-inactive {
  opacity: 0.4 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  filter: grayscale(0.6) !important;
}

/* Стиль для кнопок неактивных игроков в панели голосования */
button.modal-btn.voting-inactive,
.modal-grid button.voting-inactive {
  opacity: 0.3 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  filter: grayscale(0.7) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Стили для таймера в панели кандидатов */
.timer-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 12px 0;
  gap: 15px;
}

.timer-display {
  flex: 1;
  font-size: 2.8em;
  font-weight: 700;
  color: var(--maf-accent-color);
  text-align: left;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 15px var(--maf-accent-color-44);
  min-width: 0;
}

.timer-controls {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  min-width: 0;
}

.timer-btn {
  background: var(--lg-bg-color, rgba(255,255,255,0.25));
  border: none;
  border-radius: 0.8rem;
  color: var(--lg-text, #fff);
  cursor: pointer;
  font-size: 0.75em;
  font-weight: 600;
  padding: 6px 8px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  font-family: var(--md3-font);
  box-shadow: 0 3px 8px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(56,34,96,.05);
}

.timer-btn:hover:not(:disabled) {
  background: var(--maf-accent-color);
  color: #fff;
  box-shadow: 0 6px 20px 0 var(--maf-accent-color-22), 0 4px 12px 0 rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

.timer-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

.timer-btn:disabled,
.timer-btn.disabled {
  opacity: 0.5;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.1);
}

.timer-start i {
  color: #6fe7b7;
}

.timer-pause i {
  color: #ffd700;
}

.timer-add {
  font-size: 0.75em;
  font-weight: 600;
}

.timer-stop i {
  color: #ff5370;
}

/* Анимация для пульсации таймера при работе */
.timer-display.running {
  animation: timer-pulse 2s ease-in-out infinite alternate;
}

/* Анимация для мигания красным при остатке 10 секунд и менее */
.timer-display.warning {
  animation: timer-warning 0.8s ease-in-out infinite alternate;
}

@keyframes timer-pulse {
  0% {
    text-shadow: 0 0 15px var(--maf-accent-color-44);
    transform: scale(1);
  }
  100% {
    text-shadow: 0 0 25px var(--maf-accent-color-88), 0 0 35px var(--maf-accent-color-44);
    transform: scale(1.02);
  }
}

@keyframes timer-warning {
  0% {
    color: #ff5370;
    text-shadow: 0 0 15px rgba(255, 83,  112, 0.5);
    transform: scale(1);
  }
  100% {
    color: #ff1744;
    text-shadow: 0 0 25px rgba(255, 23, 68, 0.8), 0 0 35px rgba(255, 83, 112, 0.6);
    transform: scale(1.05);
  }
}

/* Адаптивность для маленьких экранов */
@media (max-width: 480px) {
  .timer-section {
    flex-direction: row !important; /* Цифры слева от кнопок */
    gap: 15px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  
  .timer-display {
    font-size: 5em !important; /* Увеличиваем размер цифр таймера до 5em */
    text-align: left !important; /* Располагаем цифры слева */
    line-height: 1 !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto !important; /* Не растягиваем блок с цифрами */
    min-width: 120px !important; /* Минимальная ширина для цифр */
    margin-right: 15px !important;
  }
  
  .timer-controls {
    flex: 1 !important; /* Кнопки занимают оставшееся место */
    min-width: 0 !important;
    max-width: 200px !important;
  }
  
  .timer-btn {
    min-height: 40px !important;
    font-size: 0.9em !important;
  }
}

/* Дополнительные стили для лучшего скролла */
html {
  /* Предотвращаем белый фон при переscroll */
  background: var(--maf-gradient-bg, linear-gradient(135deg, #1a1625 0%, #2d1b47 25%, #1f1a3a 50%, #2a1f45 75%, #1a1625 100%));
  background-attachment: fixed;
}

/* Контейнер с улучшенным скроллом */
.scroll-container {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* Предотвращение резкого скролла */
* {
  scroll-behavior: smooth;
}

/* Стили для WebKit браузеров (Safari, Chrome) */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(174,140,255,0.3);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(174,140,255,0.5);
}

/* Улучшенная обработка прикосновений */
.players-list,
.modal-content,
.voting-modal-content,
.settings-modal-content {
  touch-action: pan-y;
}

/* Исправляем скролл в модальных окнах */
.modal {
  overscroll-behavior: contain;
}

/* Специальные стили только для panel.html (адаптация под Telegram) */
body:not(.roles-page) .players-list {
  margin-top: 65px;
}

body:not(.roles-page) .modal-content,
body:not(.roles-page) .settings-modal-content,
body:not(.roles-page) .voting-modal-content,
body:not(.roles-page) .best-move-modal-content,
body:not(.roles-page) .qr-modal-content,
body:not(.roles-page) .theme-modal-content {
  margin-top: 65px;
  max-height: min(760px, calc(100vh - 85px));
}

/* Растягивание кнопок в модальном окне настроек на всю ширину */
.settings-modal-content .glass-btn {
  width: calc(100% - 10px) !important;
  margin: 0 5px !important;
  box-sizing: border-box !important;
}

.settings-modal-content .modal-actions {
  width: 100% !important;
  box-sizing: border-box !important;
}

.settings-modal-content .modal-actions .glass-btn {
  width: calc(100% - 10px) !important;
  margin: 0 5px 8px 5px !important;
}