/* ===================================================================
   SYMBATTLE 2.0 — ГЛАВНЫЙ ФАЙЛ СТИЛЕЙ
   Версия: 2.1 | Оптимизировано: 2026
   =================================================================== */


/* ===================================================================
   🎨 1. ПЕРЕМЕННЫЕ И БАЗОВЫЕ НАСТРОЙКИ
   =================================================================== */
:root {
  /* Цветовая палитра */
  --sb-primary: #4361ee;
  --sb-success: #06d6a0;
  --sb-warning: #ffd166;
  --sb-danger: #ef476f;
  --sb-dark: #1a1a2e;
  --sb-light: #f8f9fa;

  /* Компоненты */
  --sb-card-bg: #fff;
  --sb-card-shadow: 0 4px 20px rgba(0,0,0,0.08);

  /* Анимации */
  --sb-transition-fast: 0.15s ease;
  --sb-transition-normal: 0.3s ease;
}

body {

  background: var(--sb-light);
  margin: 0;
/*  font-family: system-ui, -apple-system, sans-serif;*/
}


/* ===================================================================
   🧱 2. БАЗОВЫЕ КОМПОНЕНТЫ
   =================================================================== */
/* Карточки */
.sb-card {
  background: var(--sb-card-bg);
  border-radius: 16px;
  box-shadow: var(--sb-card-shadow);
  border: none;
  transition: transform var(--sb-transition-fast), box-shadow var(--sb-transition-fast);
}
.sb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

/* Кнопки пользователя */
.sb-user-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 110px;
}
.sb-user-btn {
  text-align: right;
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--sb-transition-fast);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.sb-user-btn:hover {
  background: rgba(255,255,255,0.35);
  color: #fff;
  text-decoration: none;
}
.sb-user-btn.primary {
  background: #fff;
  color: var(--sb-success);
  border-color: #fff;
  font-weight: 700;
}
.sb-user-btn.primary:hover {
  background: rgba(255,255,255,0.9);
  transform: translateY(-1px);
}

/* Бейджи */
.sb-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sb-badge-mode { background: rgba(67,97,238,0.15); color: var(--sb-primary); }
.sb-badge-time { background: rgba(6,214,160,0.15); color: var(--sb-success); }


/* ===================================================================
   🎮 3. ИГРОВАЯ ПАНЕЛЬ
   =================================================================== */
/* Задание */
#task-display {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: clamp(32px, 8vw, 64px);
  font-weight: 700;
  line-height: 1.2;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  border: 3px solid var(--sb-primary);
  position: relative;
  overflow: hidden;
  padding: 0 24px;
  box-sizing: border-box;
}
#task-display::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sb-primary), var(--sb-success), var(--sb-warning), var(--sb-danger));
  animation: sb-glow 2s linear infinite;
}
#task-display::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 60px;
  background: linear-gradient(to right, rgba(233,236,239,0) 0%, rgba(233,236,239,1) 70%);
  pointer-events: none;
  z-index: 1;
}
@keyframes sb-glow { 0%,100%{opacity:0.6} 50%{opacity:1} }

/* Символы задания */
/* Символы задания */
.task-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0; /* 🟢 Убрали отступ между буквами */
    line-height: 1.3;
    font-family: Consolas, Monaco, monospace;
    font-weight: 700;
    letter-spacing: 0.0em; /* 🟢 Немного поджали межсимвольный интервал */
    overflow: visible;
    white-space: nowrap;
    width: auto;
    min-width: 100%;
    will-change: transform;
}
.task-char {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0; /* 🟢 Убрали искусственный фиксированный слот */
    flex-shrink: 0;
    font-size: inherit; /* 🟢 Все символы одного базового размера */
    transition: opacity var(--sb-transition-fast);
}
.task-char.current {
    color: var(--sb-primary);
    font-size: inherit; /* 🟢 Активная буква такого же размера, как остальные */
    transform: none; /* 🟢 Убрали увеличение scale(1.05) */
    /* font-weight: 800; можно раскомментировать, если нужна легкая жирность для акцента */
}
.task-char.next {
    opacity: 0.6;
    font-size: inherit; /* 🟢 Последующие буквы тоже наследуют размер */
}
.task-char.space {
  min-width: 1.4em;
  opacity: 0.6;
  margin: 0 8px;
  flex-shrink: 0;
  position: relative;
}
.task-char.space::before {
  content: '␣';
  font-size: 0.8em;
  color: var(--sb-primary);
  opacity: 0.9;
  font-family: sans-serif;
  font-weight: 700;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -45%);
}
.task-char.ru-letter { color: var(--sb-danger) !important; }
.task-char.ru-letter.current {
  color: var(--sb-danger) !important;
  text-shadow: 0 0 8px rgba(239,71,111,0.4);
}

/* Поле ввода */
#answer {
  font-size: 2rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: 4px;
  border: 3px solid #ced4da !important;
  transition: box-shadow var(--sb-transition-fast);
  height: 60px;
  background: #fff !important;
}
#answer:focus {
  border-color: var(--sb-primary) !important;
  box-shadow: 0 0 0 4px rgba(67,97,238,0.15);
  outline: none;
}
#answer.correct { animation: sb-pulse 0.2s ease; }
#answer.wrong { animation: sb-shake 0.2s ease; }
@keyframes sb-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }
@keyframes sb-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

/* Таймер */
.sb-time-bar {
  height: 24px;
  border-radius: 12px;
  background: #e9ecef;
  overflow: visible;
  margin: 8px 0 16px;
  position: relative;
  display: flex;
  align-items: center;
}
.sb-time-bar .progress {
  height: 100%;
  background: linear-gradient(90deg, var(--sb-primary), var(--sb-success));
  transition: width 1s linear;
  width: 100%;
  border-radius: 12px;
  will-change: width;
}
.sb-time-bar .progress.warning { background: linear-gradient(90deg, var(--sb-warning), #ffc107); }
.sb-time-bar .progress.danger { background: linear-gradient(90deg, var(--sb-danger), #fd7e14); }
.sb-time-bar .time-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sb-dark);
  text-shadow: 0 0 4px rgba(255,255,255,0.95);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* Статистика */
.sb-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0;
}
.sb-stat-group {
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  border-left: 4px solid var(--sb-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
}
.sb-stat-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px dashed #eee;
  flex-shrink: 0;
}
.sb-stat-item {
  text-align: center;
  flex: 1;
}
.sb-stat-item .value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--sb-dark);
  line-height: 1;
}
.sb-stat-item .label {
  font-size: 0.75rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.sb-stat-item.success .value { color: var(--sb-success); }
.sb-stat-item.danger .value { color: var(--sb-danger); }

/* Четвёртая статистика с бейджем */
.sb-stat-item.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 8px;
  background: rgba(67,97,238,0.08);
  border-radius: 8px;
  border: 1px dashed var(--sb-primary);
}
.value-badge {
  font-size: 1.2rem;
  line-height: 1;
  margin-bottom: 2px;
}
.badge-item .value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--sb-primary);
}
.badge-item .label {
  font-size: 0.7rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Блок пользователя */
.sb-user-bar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, var(--sb-success), #05c494);
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 3px 12px rgba(6,214,160,0.3);
  min-height: 0;
}
.sb-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.sb-user-name {
  font-weight: 700;
  font-size: 1.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-user-status {
  font-size: 0.75rem;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sb-user-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: sb-pulse 1.5s infinite;
}

/* Спидометр */
.sb-stat-speedo {
  background: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  border-left: 4px solid var(--sb-warning);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}
.speedometer-inline {
  position: relative;
  width: 180px; height: 180px;
}
.speedometer-svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.speedometer-bg { fill: none; stroke: #e9ecef; stroke-width: 14; }
.speedometer-fill {
  fill: none;
  stroke: var(--sb-primary);
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--sb-transition-normal) linear;
}
.speedometer-val {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -70%);
  font-size: 4rem;
  font-weight: 800;
  color: var(--sb-dark);
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.speedometer-lbl {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, 65%);
  font-size: 0.9rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  white-space: nowrap;
}


/* ===================================================================
   ⚙️ 4. НАСТРОЙКИ ИГРЫ
   =================================================================== */
.sb-settings .form-check { margin-bottom: 8px; }
.sb-settings .form-check-input {
  width: 1.5em; height: 1.5em;
  margin-top: 0.1em;
  cursor: pointer;
}
.sb-settings .form-check-label {
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background var(--sb-transition-fast);
}
.sb-settings .form-check-input:checked + .form-check-label {
  background: rgba(67,97,238,0.1);
  color: var(--sb-primary);
  font-weight: 600;
}


/* ===================================================================
   📋 5. ЛОГ ИГРЫ
   =================================================================== */
   #game-log {
       background: #ffffff; /* Белый фон вместо тёмного */
       color: var(--sb-dark); /* Тёмный текст */
       font-family: 'Consolas', 'Monaco', monospace; /* Чуть более аккуратный шрифт */
       font-size: 0.9rem;
       border: 1px solid #e9ecef; /* Лёгкая рамка */
       border-radius: 8px; /* Скруглим углы */
       padding: 12px;
       height: 180px;
       overflow-y: auto;
       line-height: 1.5;
   }

   /* Цвета сообщений (адаптированы для белого фона) */
   #game-log .text-success { color: var(--sb-success) !important; }
   #game-log .text-danger  { color: var(--sb-danger) !important; }
   #game-log .text-warning { color: #e6a800 !important; } /* Чуть темнее, чтобы читалось на белом */
   #game-log .text-info    { color: var(--sb-primary) !important; }

   /* Ожидание старта */
   .sb-waiting {
       font-size: 1.5rem; /* Чуть уменьшим, чтобы влезало */
       font-weight: 600;
       color: var(--sb-primary);
   }
.sb-waiting::after {
  content: '';
  animation: sb-dots 1.5s steps(4,end) infinite;
}
@keyframes sb-dots {
  0%,20%{content:''} 40%{content:'.'} 60%{content:'..'} 80%,100%{content:'...'}
}


/* ===================================================================
   🏆 6. ТАБЛИЦЫ И ЛИДЕРБОРДЫ
   =================================================================== */
.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  background: #fff;
}
.leaderboard-table th,
.leaderboard-table td {
  padding: 8px 6px;
  border-bottom: 1px solid #eee;
  text-align: center;
  vertical-align: middle;
  line-height: 1.2;
}
.leaderboard-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: var(--sb-dark);
  position: sticky;
  top: 0;
  z-index: 1;
}
.leaderboard-table tr:hover { background: rgba(67,97,238,0.03); }

.leaderboard-table .rank {
  width: 36px;
  font-weight: 700;
  color: var(--sb-primary);
  font-size: 1rem;
}
.leaderboard-table .rank.gold { color: #ffd700; text-shadow: 0 0 2px rgba(0,0,0,0.2); }
.leaderboard-table .rank.silver { color: #c0c0c0; }
.leaderboard-table .rank.bronze { color: #cd7f32; }

.leaderboard-table a {
  color: var(--sb-primary);
  text-decoration: none;
}
.leaderboard-table a:hover { text-decoration: underline; }

.leaderboard-loading,
.leaderboard-empty {
  text-align: center;
  padding: 20px;
  color: #6c757d;
}
.leaderboard-empty { font-style: italic; }

/* ⚠️ Закомментировано: не используется в текущем renderLeaderboard()
.sb-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:64px; padding:6px 2px; }
.sb-cell-res { font-weight:700; font-family:monospace; font-size:1.15rem; line-height:1.1; }
.sb-cell-meta { font-size:0.7rem; color:#6c757d; line-height:1; min-height:0.85em; }
.sb-cell-player { font-size:0.8rem; font-weight:500; line-height:1.1; min-height:1em; }
.sb-cell-player a { color:var(--sb-primary); text-decoration:none; display:block; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-cell-player a:hover { text-decoration:underline; }
.sb-cell-speed { font-weight:800; font-family:monospace; font-size:1.3rem; line-height:1; color:var(--sb-primary); display:flex; align-items:baseline; justify-content:center; gap:2px; }
.sb-cell-speed small { font-size:0.65rem; font-weight:600; color:#6c757d; text-transform:uppercase; letter-spacing:0.3px; }
.sb-cell-res-secondary { font-weight:600; font-family:monospace; font-size:0.95rem; color:var(--sb-dark); background:rgba(67,97,238,0.08); padding:2px 8px; border-radius:6px; display:inline-block; }
*/


/* ===================================================================
   🔴 7. ПРЯМОЙ ЭФИР И САЙДБАР
   =================================================================== */
.sidebar-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sidebar-section h6 {
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--sb-primary);
  display: inline-block;
}
.live-feed {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 4px;
}
.live-feed::-webkit-scrollbar { width: 6px; }
.live-feed::-webkit-scrollbar-thumb { background: rgba(67,97,238,0.3); border-radius: 3px; }
.live-feed::-webkit-scrollbar-track { background: transparent; }

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
}
.stat-item:last-child { border-bottom: none; }
.stat-label { color: #6c757d; font-size: 0.9rem; }
.stat-value { font-weight: 700; color: var(--sb-dark); }

.live-item {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  font-size: 0.85rem;
}
.live-item:last-child { border-bottom: none; }
.live-player {
  color: var(--sb-primary);
  text-decoration: none;
}
.live-player:hover {
  text-decoration: underline;
  color: #3a56d4;
}
.live-fio {
  font-size: 0.9rem;
  color: #222;
  font-weight: bold;
  display: block;
  margin-bottom: 2px;
}
.live-meta { color: #6c757d; font-size: 0.8rem; }
.live-result { font-weight: 700; font-family: monospace; }


/* ===================================================================
   🔔 8. ТОСТЫ И УВЕДОМЛЕНИЯ
   =================================================================== */
#toast-queue .toast {
  animation: toastSlideIn 0.3s ease-out;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, opacity 0.2s ease;
  background: #fff !important;
  border: 1px solid #dee2e6 !important;
  border-left: 4px solid var(--sb-primary);
}
@keyframes toastSlideIn {
  from { opacity:0; transform:translateX(100px) scale(0.95); }
  to { opacity:1; transform:translateX(0) scale(1); }
}
#toast-queue .toast:not(:first-child) { opacity: 0.92; }
#toast-queue:hover .toast { opacity: 1 !important; }

#toast-queue .toast .toast-body {
  color: #1a1a2e !important;
  padding: 12px 16px !important;
  line-height: 1.4;
}
#toast-queue .toast .btn-close { filter: none !important; opacity: 0.6; }
#toast-queue .toast .btn-close:hover { opacity: 1; }

.toast-mode-badge {
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
}
.toast-mode-badge.ru { background: rgba(239,71,111,0.12); color: #ef476f; }
.toast-mode-badge.en { background: rgba(6,214,160,0.12); color: #06d6a0; }
.toast-mode-badge.code { background: rgba(108,117,125,0.12); color: #6c757d; }
.toast-mode-badge.default { background: rgba(67,97,238,0.12); color: #4361ee; }

.toast-accuracy {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
}
.toast-accuracy.high { background: rgba(6,214,160,0.15); color: #06d6a0; }
.toast-accuracy.medium { background: rgba(255,209,102,0.2); color: #b8860b; }
.toast-accuracy.low { background: rgba(239,71,111,0.15); color: #ef476f; }

.toast-fio {
  font-size: 0.8rem;
  color: #6c757d;
  font-style: italic;
  display: block;
  margin-bottom: 4px;
}
.toast-body a {
  color: var(--sb-primary);
  text-decoration: none;
  font-weight: 600;
}
.toast-body a:hover { text-decoration: underline; }

/* 🏆 Тосты достижений */
.toast-achievement {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border-left: 4px solid #ffd700 !important;
}
.toast-achievement .toast-body {
    color: #fff !important;
}
.achievement-icon {
    font-size: 2rem;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
}
.achievement-name {
    font-weight: 700;
    font-size: 1.05rem;
    display: block;
}
.achievement-desc {
    font-size: 0.9rem;
    opacity: 0.95;
    display: block;
    margin-top: 2px;
}
.achievement-points {
    display: inline-block;
    background: rgba(255,255,255,0.25);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 4px;
}
@keyframes achievementPop {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}
.toast-achievement {
    animation: achievementPop 0.3s ease-out;
}

/* 🏆 Тосты достижений — уточнение отображения текста */
.toast-achievement .achievement-name {
    font-size: 1.05rem;
    line-height: 1.3;
}
.toast-achievement .achievement-desc {
    font-size: 0.9rem;
    opacity: 0.9;
    line-height: 1.3;
}
.toast-achievement .achievement-points {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 4px;
}
/* ===================================================================
   🔥 9. ЭФФЕКТЫ И АНИМАЦИИ
   =================================================================== */
/* Перегрев */
#speed-heat-overlay {
  position: fixed;
  left: 0; bottom: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(239,71,111,var(--heat-opacity,0)) 0%,
    rgba(239,71,111,0) 60%,
    transparent 100%);
  transition: opacity 0.3s ease;
  z-index: 1;
  opacity: var(--heat-opacity, 0);
}
body > .container,
body > .toast-container,
.sb-card,
.modal-content {
  position: relative;
  z-index: 2;
}
@keyframes heatPulse {
  0%,100% { opacity: var(--heat-opacity, 0); }
  50% { opacity: calc(var(--heat-opacity, 0) * 1.3); }
}
body.heat-extreme #speed-heat-overlay {
  animation: heatPulse 1.5s ease-in-out infinite;
}

/* Обратный отсчёт */
.countdown-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
  backdrop-filter: blur(2px);
}
.countdown-number {
  font-size: 15vw;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 50px rgba(67,97,238,0.8);
  animation: popIn 0.9s cubic-bezier(0.175,0.885,0.32,1.275);
}
.countdown-number.go {
  color: #06d6a0;
  text-shadow: 0 0 50px rgba(6,214,160,0.8);
  animation: popIn 1s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes popIn {
  0% { transform:scale(3); opacity:0; }
  40% { transform:scale(0.9); opacity:1; }
  100% { transform:scale(1); opacity:0; }
}


/* ===================================================================
   📱 10. АДАПТИВ
   =================================================================== */
@media (max-width: 768px) {
  .sb-stats { grid-template-columns: 1fr; }
  #task-display { font-size: 2.5rem; min-height: 100px; padding: 0 16px; }
  #answer { font-size: 1.5rem; height: 50px; }
  .leaderboard-table { font-size: 0.8rem; }
  .leaderboard-table th,
  .leaderboard-table td { padding: 4px 6px !important; }
  .speedometer-inline { width: 140px; height: 140px; }
  .speedometer-val { font-size: 2rem; }
  .task-char.space { min-width: 1.2em; margin: 0 6px; }
  .task-char.space::after { font-size: 0.4em; bottom: -14px; }
  .sb-user-bar { flex-wrap: wrap; }
  .sb-user-name { max-width: 100%; }
  .sb-stat-row { flex-wrap: wrap; gap: 8px; }
  .sb-stat-item { flex: 0 0 calc(50% - 8px); min-width: 0; }
  .badge-item .value { font-size: 1.1rem; }
  .sb-user-actions { flex-wrap: wrap; justify-content: center; }
  .sb-user-btn { font-size: 0.75rem; padding: 4px 10px; }
}

@media (max-width: 576px) {
  .toast-container { padding: 1rem !important; width: 100%; max-width: 100vw; }
  #toast-queue .toast { min-width: 100% !important; max-width: 100% !important; }
}


/* ===================================================================
   🗂 11. СТИЛИ ДЛЯ ДРУГИХ СТРАНИЦ
       (оставлены для совместимости, не используются в index.php)
   =================================================================== */

/* 📄 view_filials.php */
.filial-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #eee; }
.filial-item:last-child { border-bottom:none; }
.filial-name { font-weight:600; min-width:140px; color:var(--sb-dark); }
.filial-bar { flex:1; height:12px; background:#e9ecef; border-radius:6px; overflow:hidden; }
.filial-fill { height:100%; background:linear-gradient(90deg,var(--sb-primary),var(--sb-success)); border-radius:6px; transition:width var(--sb-transition-normal) ease; }
.filial-value { font-weight:700; font-family:monospace; min-width:60px; text-align:right; }

.school-level { background:linear-gradient(135deg,var(--sb-warning),#ffc107); color:var(--sb-dark); border-radius:12px; padding:16px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.level-badge { font-size:2.5rem; font-weight:800; line-height:1; background:rgba(255,255,255,0.3); padding:8px 16px; border-radius:12px; }
.level-info { flex:1; min-width:200px; }
.level-progress { height:8px; background:rgba(255,255,255,0.3); border-radius:4px; overflow:hidden; margin-top:8px; }
.level-progress-fill { height:100%; background:var(--sb-dark); border-radius:4px; transition:width var(--sb-transition-normal) ease; }

.nek-block { background:linear-gradient(135deg,#6c757d,#495057); color:#fff; border-radius:12px; padding:16px; text-align:center; }
.nek-value { font-size:2rem; font-weight:800; margin:4px 0; }

.leaders-table { width:100%; border-collapse:collapse; font-size:0.9rem; }
.leaders-table th, .leaders-table td { padding:10px 12px; border-bottom:1px solid #eee; }
.leaders-table th { background:#f8f9fa; font-weight:600; color:var(--sb-dark); }
.leaders-table tr:hover { background:rgba(67,97,238,0.03); }
.leaders-table .rank { width:40px; text-align:center; font-weight:700; color:var(--sb-primary); }
.leaders-table .rank.gold { color:#ffd700; }
.leaders-table .rank.silver { color:#c0c0c0; }
.leaders-table .rank.bronze { color:#cd7f32; }
.leaders-table .player { font-weight:500; }
.leaders-table .score { font-weight:700; font-family:monospace; text-align:right; }

/* 📄 view_race.php */
.race-header { background:linear-gradient(135deg,var(--sb-primary),#3a56d4); color:#fff; border-radius:16px; padding:24px; margin-bottom:24px; text-align:center; }
.race-title { font-size:1.8rem; font-weight:800; margin:0 0 8px; }
.race-subtitle { opacity:0.9; font-size:1.1rem; }
.filter-bar { background:var(--sb-card-bg); border-radius:12px; padding:16px; margin-bottom:24px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; }
.filter-group { display:flex; gap:8px; align-items:center; }
.filter-label { font-size:0.85rem; font-weight:600; color:#6c757d; }
.filter-select { padding:8px 12px; border:1px solid #dee2e6; border-radius:8px; font-size:0.9rem; background:#fff; cursor:pointer; }
.filter-select:focus { outline:none; border-color:var(--sb-primary); box-shadow:0 0 0 3px rgba(67,97,238,0.15); }
.player-stats { background:linear-gradient(135deg,var(--sb-success),#05c494); color:#fff; border-radius:12px; padding:16px 24px; margin-bottom:24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.stat-big { font-size:2.5rem; font-weight:800; line-height:1; }
.stat-message { font-size:1.1rem; font-weight:600; }
.leaderboard-table tr.current-user { background:rgba(6,214,160,0.12) !important; border-left:4px solid var(--sb-success); }
.player-name { font-weight:600; display:flex; align-items:center; gap:8px; }
.medal { display:inline-flex; align-items:center; justify-content:center; font-size:1.3rem; vertical-align:middle; width:32px; height:32px; line-height:1; flex-shrink:0; }
.score { font-weight:700; font-family:monospace; font-size:1.1rem; color:var(--sb-primary); text-align:right; }
.race-footer { text-align:center; margin-top:24px; }

@media (max-width:768px) {
  .filter-bar { flex-direction:column; align-items:stretch; }
  .filter-group { justify-content:center; }
  .player-stats { flex-direction:column; text-align:center; }
  .leaderboard-table { font-size:0.9rem; }
  .leaderboard-table th, .leaderboard-table td { padding:10px 12px; }
  .rank { width:40px; font-size:1rem; }
  .score { font-size:1rem; }
  .medal { width:28px; height:28px; font-size:1.1rem; }
}

/* 📄 view_race_result.php */
.copy-panel { background:#f8f9fa; border-radius:12px; padding:16px; display:none; margin-top:20px; }
.copy-panel.active { display:block; }
.copy-btn { padding:6px 12px; margin:4px; border:1px solid var(--sb-primary); border-radius:6px; background:#fff; color:var(--sb-primary); cursor:pointer; font-size:0.85rem; transition:all 0.15s; }
.copy-btn:hover { background:var(--sb-primary); color:#fff; }
.copy-btn.secondary { border-color:#6c757d; color:#6c757d; }
.copy-btn.secondary:hover { background:#6c757d; color:#fff; }
.copy-hint { color:var(--sb-success); font-weight:600; margin-left:12px; display:none; }
.empty-state { text-align:center; padding:40px; color:#6c757d; }
.loading { text-align:center; padding:20px; color:var(--sb-primary); }
.results-table .year-header { background:linear-gradient(135deg,var(--sb-primary),#3a56d4); color:#fff; font-weight:700; font-size:1rem; }
.medal { font-size:1.2rem; margin-right:4px; }
.player-link { color:var(--sb-primary); text-decoration:none; font-weight:500; }
.player-link:hover { text-decoration:underline; }


/* 🔔 Улучшение видимости переключателя в шапке */

/* 🔍 Подсветка ячеек с тултипами */
.sb-tooltip-trigger {
    cursor: help;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s ease;
    display: inline-block;
}
.sb-tooltip-trigger:hover {
    background: rgba(67, 97, 238, 0.08);
}


/* 📢 Тост от администратора */
.toast-admin {
    background: linear-gradient(135deg, #fff8f8, #ffecec) !important;
    border: 1px solid #ffc2c2 !important;
    border-left: 5px solid #dc3545 !important;
    box-shadow: 0 6px 24px rgba(220, 53, 69, 0.25) !important;
    max-width: 480px;
    pointer-events: auto;
}
.toast-admin .toast-body {
    color: #212529 !important;
    padding: 16px 20px !important;
    line-height: 1.5;
}
.toast-admin .admin-msg-text {
    font-size: 1.05rem;
    font-weight: 500;
    white-space: pre-wrap;
    word-break: break-word;
}
.toast-admin .btn-close {
    filter: invert(30%) sepia(80%) saturate(3000%) hue-rotate(330deg);
    opacity: 0.8;
    margin: 0;
    padding: 8px;
}
.toast-admin .btn-close:hover { opacity: 1; transform: scale(1.1); }
.sb-stats.stats-collapsed { grid-template-columns: 1fr; }