/* ============================================================
   ГЛОБАЛЬНЫЕ СТИЛИ
   Здесь: CSS-переменные, шрифты, сброс стилей, утилиты.
   Все цвета берутся из этих переменных — меняешь здесь, меняется везде.
   ============================================================ */

/* --- Шрифты (Google Fonts) подключаются в <head> страницы — параллельно со стилями --- */

/* --- CSS-переменные (совпадают с theme.ts) --- */
:root {
  /* Фоны */
  --bg:        #0A0505;
  --surface:   #140909;
  --surface-2: #1C0D0D;
  --surface-3: #2E1414;

  /* Границы */
  --border:    #2E1414;
  --border-hi: #471C1C;

  /* Текст */
  --text:      #F5F0E6;
  --text-dim:  #A89494;
  --text-mute: #735A5A;

  /* Акценты */
  --gold:      #F0B232;
  --gold-hi:   #FFD77A;
  --gold-dim:  #8A6B2A;

  /* Метрики */
  --pvp:       #E74C3C;
  --pve:       #3498DB;
  --craft:     #2ECC71;
  --gather:    #F39C12;

  /* Статусы */
  --success:   #2ECC71;
  --danger:    #E74C3C;
  --warning:   #F39C12;
  --info:      #3498DB;
  --discord:   #5865F2;

  /* Тени */
  --shadow-card:    0 4px 20px rgba(0,0,0,0.4);
  --shadow-card-hi: 0 8px 30px rgba(0,0,0,0.6);
  --glow-gold:      0 0 24px rgba(240,178,50,0.25);
  --glow-gold-hi:   0 0 40px rgba(240,178,50,0.4);
  --glow-pvp:       0 0 20px rgba(231,76,60,0.2);
  --glow-pve:       0 0 20px rgba(52,152,219,0.2);
  --glow-craft:     0 0 20px rgba(46,204,113,0.2);
  --glow-gather:    0 0 20px rgba(243,156,18,0.2);

  /* Радиусы */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Шрифты */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* --- Сброс --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- База --- */
html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Мягкий радиальный градиент — добавляет "дороговизны" */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(200,30,40,0.16), transparent),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(200,30,40,0.08), transparent);
  background-attachment: fixed;
}

/* --- Ссылки --- */
a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--gold-hi);
}

/* --- Кнопки и инпуты наследуют шрифт --- */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* --- Заголовки --- */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 24px; }
h3 { font-size: 18px; font-weight: 600; }

/* --- Утилиты (используются в компонентах) --- */

/* Стекло — основной "материал" карточек */
.glass {
  background: linear-gradient(180deg,
    rgba(30,14,14,0.7) 0%,
    rgba(20,9,9,0.9) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
}

/* Акцентная полоска слева от заголовков */
.accent-bar {
  display: inline-block;
  width: 4px;
  height: 20px;
  background: var(--gold);
  border-radius: 2px;
  vertical-align: middle;
}

/* Моно-цифры для фейма/серебра */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;   /* табличные цифры — не "прыгают" */
}

/* Плавные переходы для всех интерактивных элементов */
button, a, .clickable {
  transition: all 0.15s ease;
}

/* Скрыть скроллбар на тёмном фоне (опционально) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* --- Анимации --- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.4s ease-out both;
}

/* --- View Transitions (плавные переходы между страницами) --- */
@view-transition {
  navigation: auto;
}

/* ============================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
   Правки для экранов < 768px (планшеты и телефоны).
   ============================================================ */

/* === Базовые правила для тач-устройств === */
@media (max-width: 900px) {
  /* Тап-таргеты минимум 44px */
  button, a.clickable, .role-btn, .raid-icon-btn, .builds-del-btn, .builds-view-btn {
    min-height: 44px;
  }

  /* Контейнер — меньше padding */
  .container {
    padding: 16px 12px 60px !important;
  }

  /* Заголовки — компактнее */
  h1 { font-size: 26px !important; }
  /* без !important: у заголовков с собственным классом (разделы настроек и т.п.) свой размер */
  h2 { font-size: 20px; }
}

/* === Профиль === */
@media (max-width: 700px) {
  .profile-hero { padding: 24px 20px !important; }
  .profile-hero-inner { gap: 16px !important; }
  .profile-name { font-size: 24px !important; }
  .profile-avatar-wrap svg { width: 72px !important; height: 72px !important; }
  .fame-ratio-grid { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr !important; }
  .stats-grid .stat-big { grid-column: span 1 !important; grid-row: auto !important; }
  .gather-row {
    grid-template-columns: 90px 1fr 60px !important;
    gap: 8px !important;
  }
  .gather-share { display: none !important; }
  .ach-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; }
  .ext-card { padding: 14px !important; gap: 12px !important; }
  .ext-name { font-size: 14px !important; }
}

/* === Ростер === */
@media (max-width: 700px) {
  .roster-header h1 { font-size: 22px !important; }
  .tabs { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 4px; }
  .tab { flex-shrink: 0; padding: 8px 14px !important; font-size: 13px !important; }
  .podium { grid-template-columns: 1fr !important; gap: 8px !important; }
  .podium-card { padding: 16px 12px !important; }
  .podium-avatar { width: 44px !important; height: 44px !important; font-size: 18px !important; }
  .podium-name { font-size: 14px !important; }
  .podium-fame { font-size: 18px !important; }
  table { font-size: 13px !important; }
  th, td { padding: 10px 12px !important; }
  .anti-grid { grid-template-columns: 1fr !important; }
}

/* === Рейды === */
@media (max-width: 900px) {
  .raid-grid { grid-template-columns: 1fr !important; }
  .raid-sticky-header { top: 56px !important; padding: 12px !important; gap: 10px !important; }
  .raid-header-title { font-size: 18px !important; }
  .raid-header-meta { font-size: 12px !important; }
  .raid-header-actions { flex-wrap: wrap; }
  .raid-icon-btn { width: 38px !important; height: 38px !important; }
  .raid-panel { padding: 14px !important; }
  .raid-panel-header h2 { font-size: 13px !important; }
  .raid-add-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .raid-add-select,
  .raid-add-btn { width: 100% !important; }
  .raid-add-count { max-width: 100% !important; }
  .raid-slots-list { gap: 6px !important; }
  .raid-slot { padding: 10px !important; }
  .raid-slot-icon { width: 40px !important; height: 40px !important; }
  .raid-chip { padding: 8px 10px !important; }
  .raid-chip-avatar { width: 32px !important; height: 32px !important; }
  .raid-signups-list { max-height: 400px !important; }
}

/* === Анти-рекорды === */
@media (max-width: 700px) {
  .anti-page-section { padding: 14px 16px !important; }
  .anti-page-head { gap: 10px !important; }
  .anti-page-icon { width: 40px !important; height: 40px !important; font-size: 20px !important; }
  .anti-page-title { font-size: 14px !important; }
  .anti-page-subtitle { font-size: 11px !important; }
  .anti-page-rank { font-size: 16px !important; width: 28px !important; }
  .anti-page-name { font-size: 14px !important; }
  .anti-page-value { font-size: 13px !important; }
}

/* === Мои роли === */
@media (max-width: 700px) {
  .my-roles-page { padding-bottom: 120px; }
  .my-roles-header h1 { font-size: 20px !important; }
  .role-card { padding: 14px !important; }
  .role-card-head { gap: 10px !important; }
  .role-card-icon { width: 40px !important; height: 40px !important; }
  .role-card-name { font-size: 14px !important; }
  .role-card-levels { grid-template-columns: repeat(2, 1fr) !important; }
  .role-btn { min-height: 60px !important; padding: 8px 6px !important; }
  .role-btn-icon { font-size: 16px !important; }
  .role-btn-label { font-size: 10px !important; }
  .my-roles-save-bar { padding: 6px !important; bottom: 12px !important; }
  .my-roles-save-btn { padding: 12px 24px !important; font-size: 14px !important; }
}

/* === Админка === */
@media (max-width: 900px) {
  .admin-header h1 { font-size: 22px !important; }
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .admin-stat { padding: 14px !important; }
  .admin-stat-value { font-size: 24px !important; }
  .admin-stat-label { font-size: 10px !important; }
  .admin-inactive-row { padding: 10px 12px !important; gap: 10px !important; }
  .admin-inactive-avatar { width: 32px !important; height: 32px !important; font-size: 13px !important; }
  .admin-inactive-name { font-size: 13px !important; }
  .admin-inactive-days { font-size: 12px !important; }
  .admin-roles-table { font-size: 12px !important; }
  .admin-roles-table th, .admin-roles-table td { padding: 10px 12px !important; }
  .admin-role-player { font-size: 13px !important; }
  .admin-roles-table-wrap { overflow-x: auto; }
  .admin-roles-table { min-width: 600px; }
}

/* === Админка: билды и настройки === */
@media (max-width: 700px) {
  .builds-section-body { padding: 14px !important; }
  .builds-form-grid-2, .builds-form-grid-3 { grid-template-columns: 1fr !important; }
  .builds-form input, .builds-input { font-size: 14px !important; }
  .builds-table-wrap { overflow-x: auto; }
  .builds-table { min-width: 500px; }

  .settings-section-body { padding: 4px 0 !important; }
  .settings-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px 16px !important;
  }
  .settings-row-toggle { flex-direction: row !important; align-items: center !important; }
  .settings-input, .settings-select { max-width: 100% !important; }
  .settings-color-picker { flex-wrap: wrap; }
  .settings-save-bar { bottom: 12px !important; padding: 6px !important; }
  .settings-save-btn { padding: 12px 24px !important; font-size: 14px !important; }
}

/* === Dashboard билда === */
@media (max-width: 600px) {
  .build-grid { grid-template-columns: 1fr !important; }
  .build-cost { flex-direction: column !important; text-align: center !important; }
  .build-cost-right { text-align: center !important; }
  .build-cost-value { font-size: 26px !important; }
}

/* === Модалки === */
@media (max-width: 500px) {
  .modal-overlay, .changelog-overlay { padding: 12px !important; }
  .modal { padding: 24px 20px 20px !important; }
  .modal-title { font-size: 16px !important; }
  .modal-actions { flex-direction: column !important; }
  .modal-btn { width: 100% !important; }
  .changelog-modal { padding: 28px 20px 20px !important; }
  .changelog-icon { font-size: 44px !important; }
  .changelog-actions { flex-direction: column !important; }
  .changelog-btn { width: 100% !important; }
}

/* === Тост === */
@media (max-width: 500px) {
  .toast-container, #toast-container {
    left: 12px !important;
    right: 12px !important;
    top: 12px !important;
    max-width: none !important;
  }
  .toast {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
}

/* === Custom Select === */
@media (max-width: 500px) {
  .cs-dropdown {
    max-height: 60vh !important;
  }
  .cs-option-icon { width: 32px !important; height: 32px !important; }
  .cs-option-label { font-size: 13px !important; }
}

/* === NumberStepper === */
@media (max-width: 500px) {
  .ns-wrap { height: 44px !important; }
  .ns-btn { width: 44px !important; font-size: 20px !important; }
  .ns-input { width: 50px !important; font-size: 16px !important; }
}

/* === Скрыть тяжёлые элементы на мобилке === */
@media (max-width: 600px) {
  /* Опционально: скрыть sparkline в стат-картах */
  .stat-big svg { display: none !important; }
}

/* === Улучшения для горизонтальных таблиц === */
@media (max-width: 700px) {
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}
/* ============================================================
   ПЛАВНОСТЬ
   - переход между страницами: мягкое затухание, шапка стоит на месте
     (View Transitions: Chrome, Edge, Safari 18+; в остальных — как раньше);
   - содержимое открытой страницы плавно «всплывает» блоками.
   Живое обновление данных (live.js) анимацию не повторяет.
   ============================================================ */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.22s; }

@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
html.page-enter main.container > *,
html.page-enter main.container > * > :is(section, header, .glass) {
  animation: page-in 0.45s cubic-bezier(.2, .8, .2, 1) both;
}
html.page-enter main.container > * > :nth-child(2) { animation-delay: 0.04s; }
html.page-enter main.container > * > :nth-child(3) { animation-delay: 0.08s; }
html.page-enter main.container > * > :nth-child(4) { animation-delay: 0.12s; }
html.page-enter main.container > * > :nth-child(5) { animation-delay: 0.16s; }
html.page-enter main.container > * > :nth-child(n+6) { animation-delay: 0.2s; }

/* Кнопки и карточки откликаются на нажатие */
button, .btn, a.glass { transition: transform 0.15s ease, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; }
button:active:not(:disabled) { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.page-enter main.container > *,
  html.page-enter main.container > * > * { animation: none !important; }
  button:active:not(:disabled) { transform: none; }
}