/* ============================================================
   Song of the Abyss — Design System v1.0
   
   Порядок подключения: Bootstrap → design-system.css → domain/page CSS
   Все новые компоненты используют ui-* namespace.
   Старые классы (.card, .button, .navbar) НЕ перекрываются.
   ============================================================ */

/* ——— 1. CSS Custom Properties (Tokens) ——— */
:root {
  /* Цвета */
  --ui-bg:            #0b0418;
  --ui-bg-gradient:   radial-gradient(ellipse at 30% 20%, rgba(45,17,64,.7) 0%, rgba(14,5,32,.8) 70%, rgba(3,1,10,.9) 100%);
  --ui-surface:       rgba(15,7,30,0.55);
  --ui-surface-solid: #0f071e;
  --ui-surface-hover: rgba(130,70,230,0.25);
  --ui-text:          #e9e0ff;
  --ui-text-muted:    rgba(255,255,255,0.45);
  --ui-text-dim:      rgba(255,255,255,0.3);
  --ui-accent:        #e524ff;
  --ui-accent-soft:   rgba(229,36,255,0.3);
  --ui-accent-glow:   rgba(229,36,255,0.5);
  --ui-purple:        #BA55D3;
  --ui-purple-light:  #cfbaff;
  --ui-danger:        #ff6b6b;
  --ui-danger-soft:   rgba(255,109,109,0.14);
  --ui-success:       #45c08a;
  --ui-success-soft:  rgba(69,192,138,0.12);
  --ui-border:        rgba(255,255,255,0.08);
  --ui-border-accent: rgba(229,36,255,0.35);
  --ui-line:          rgba(160,110,255,0.35);

  /* Типографика */
  --ui-font:          'Montserrat Alternates', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ui-font-size-xs:  11px;
  --ui-font-size-sm:  13px;
  --ui-font-size-base: 15px;
  --ui-font-size-md:  16px;
  --ui-font-size-lg:  18px;
  --ui-font-size-xl:  24px;
  --ui-font-size-2xl: 32px;
  --ui-line-height:   1.5;

  /* Радиусы */
  --ui-radius-sm:     8px;
  --ui-radius-md:     12px;
  --ui-radius-lg:     20px;
  --ui-radius-xl:     24px;
  --ui-radius-full:   999px;

  /* Тени */
  --ui-shadow-sm:     0 2px 8px rgba(0,0,0,0.25);
  --ui-shadow-md:     0 8px 32px rgba(0,0,0,0.45);
  --ui-shadow-lg:     0 20px 60px rgba(0,0,0,0.45);
  --ui-shadow-glow:   0 0 20px rgba(229,36,255,0.35);

  /* Отступы */
  --ui-gap-xs:        4px;
  --ui-gap-sm:        8px;
  --ui-gap-md:        16px;
  --ui-gap-lg:        24px;
  --ui-gap-xl:        32px;

  /* Переходы */
  --ui-transition:    0.2s ease;
}

/* ——— 2. Reset / Base ——— */
.ui-reset,
.ui-reset * { box-sizing: border-box; }

/* ——— 3. Типографика ——— */
.ui-heading {
  font-family: var(--ui-font);
  font-weight: 300;
  color: var(--ui-purple);
  line-height: 1.3;
  margin: 0;
}
.ui-heading--sm  { font-size: var(--ui-font-size-lg); }
.ui-heading--md  { font-size: var(--ui-font-size-xl); }
.ui-heading--lg  { font-size: var(--ui-font-size-2xl); }
.ui-text         { color: var(--ui-text); font-family: var(--ui-font); }
.ui-text-muted   { color: var(--ui-text-muted); }
.ui-text-dim     { color: var(--ui-text-dim); }

/* ——— 4. Фокус ——— */
:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ——— 5. Контейнер и сетка ——— */
.ui-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--ui-gap-lg);
}
.ui-grid {
  display: grid;
  gap: var(--ui-gap-md);
}
.ui-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ui-grid--auto-sm {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.ui-flex {
  display: flex;
  gap: var(--ui-gap-md);
}
.ui-flex--wrap { flex-wrap: wrap; }
.ui-flex--center { align-items: center; justify-content: center; }

/* ——— 6. Поверхности (Surfaces) ——— */
.ui-surface {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  padding: var(--ui-gap-lg);
  box-shadow: var(--ui-shadow-md);
  backdrop-filter: blur(10px);
}
.ui-surface--elevated {
  background: rgba(26,22,47,0.94);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-lg);
}
.ui-surface--flat {
  background: rgba(0,0,0,0.35);
  border-radius: 0;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

/* ——— 7. Карточки (ui-card) ——— */
.ui-card {
  background: rgba(25,12,48,0.7);
  border: 1px solid rgba(180,130,255,0.3);
  border-radius: var(--ui-radius-md);
  overflow: hidden;
  transition: border-color var(--ui-transition), transform var(--ui-transition), box-shadow var(--ui-transition);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ui-text);
  backdrop-filter: blur(8px);
}
.ui-card:hover {
  border-color: rgba(229,36,255,0.6);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(180,100,255,0.3);
  text-decoration: none;
  color: #fff;
}
.ui-card__media {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: rgba(255,255,255,0.05);
}
.ui-card__placeholder {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.03);
  color: var(--ui-text-dim);
  font-size: 28px;
}
.ui-card__body {
  padding: var(--ui-gap-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ui-card__title {
  font-size: var(--ui-font-size-base);
  color: #e0d0ff;
  margin: 0 0 var(--ui-gap-sm);
  font-family: var(--ui-font);
  font-weight: 300;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ui-card__meta {
  font-size: var(--ui-font-size-xs);
  color: var(--ui-text-muted);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ui-card__rating {
  color: var(--ui-accent);
  font-weight: bold;
}
.ui-card__rating--negative {
  color: var(--ui-danger);
}
.ui-card__author {
  color: rgba(186,85,211,0.8);
}

/* ——— 8. Кнопки (ui-btn) ——— */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-gap-sm);
  padding: 10px 22px;
  border-radius: var(--ui-radius-full);
  border: 1px solid var(--ui-border-accent);
  background: rgba(229,36,255,0.2);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: var(--ui-font-size-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ui-transition), border-color var(--ui-transition), color var(--ui-transition), transform var(--ui-transition), box-shadow var(--ui-transition);
  white-space: nowrap;
  line-height: 1;
}
.ui-btn:hover {
  background: rgba(229,36,255,0.4);
  border-color: rgba(229,36,255,0.7);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--ui-shadow-glow);
  transform: translateY(-1px);
}
.ui-btn:active {
  transform: translateY(0);
}
.ui-btn--primary {
  background: linear-gradient(135deg, rgba(229,36,255,0.5), rgba(229,36,255,0.3));
  border-color: rgba(229,36,255,0.6);
}
.ui-btn--primary:hover {
  background: linear-gradient(135deg, rgba(229,36,255,0.7), rgba(229,36,255,0.5));
}
.ui-btn--ghost {
  background: transparent;
  border-color: var(--ui-border);
}
.ui-btn--ghost:hover {
  background: var(--ui-surface-hover);
  border-color: var(--ui-border-accent);
}
.ui-btn--sm {
  padding: 6px 14px;
  font-size: var(--ui-font-size-xs);
}
.ui-btn--danger {
  background: var(--ui-danger-soft);
  border-color: rgba(255,109,109,0.28);
  color: #ffd4d4;
}
.ui-btn--danger:hover {
  background: rgba(255,109,109,0.25);
  border-color: rgba(255,109,109,0.5);
  color: #fff;
}

/* ——— 9. Бейджи (ui-badge) ——— */
.ui-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--ui-radius-full);
  font-size: var(--ui-font-size-xs);
  font-weight: 600;
  border: 1px solid var(--ui-border);
  background: rgba(255,255,255,0.05);
  color: var(--ui-text);
  line-height: 1;
}
.ui-badge--accent {
  background: var(--ui-accent-soft);
  border-color: var(--ui-border-accent);
  color: var(--ui-accent);
}
.ui-badge--danger {
  background: var(--ui-danger-soft);
  border-color: rgba(255,109,109,0.28);
  color: #ffd4d4;
}
.ui-badge--success {
  background: var(--ui-success-soft);
  border-color: rgba(69,192,138,0.35);
  color: #d3ffe8;
}

/* ——— 10. Формы (ui-field) ——— */
.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--ui-gap-sm);
}
.ui-field label {
  font-size: var(--ui-font-size-sm);
  color: var(--ui-text-muted);
  font-family: var(--ui-font);
}
.ui-field input[type="text"],
.ui-field input[type="email"],
.ui-field input[type="password"],
.ui-field input[type="search"],
.ui-field input[type="url"],
.ui-field textarea,
.ui-field select {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--ui-radius-md);
  border: 1px solid var(--ui-line);
  background: rgba(255,255,255,0.06);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: var(--ui-font-size-base);
  outline: none;
  transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}
.ui-field input:focus,
.ui-field textarea:focus,
.ui-field select:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(229,36,255,0.15);
}
.ui-field input::placeholder,
.ui-field textarea::placeholder {
  color: var(--ui-text-dim);
}
.ui-field textarea {
  min-height: 120px;
  resize: vertical;
}

/* ——— 11. Разделители (ui-divider) ——— */
.ui-divider {
  margin: 0;
  border: none;
  border-top: 1px solid var(--ui-border);
}

/* ——— 12. Empty state ——— */
.ui-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--ui-text-dim);
  font-family: var(--ui-font);
  font-size: var(--ui-font-size-sm);
  grid-column: 1 / -1;
}
.ui-empty__icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.4;
}

/* ——— 13. Секции ——— */
.ui-section {
  padding: var(--ui-gap-lg);
}
.ui-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ui-gap-md);
  flex-wrap: wrap;
  gap: var(--ui-gap-sm);
}

/* ——— 14. Фильтры (ui-filter-bar) ——— */
.ui-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ui-filter-btn {
  padding: 6px 16px;
  border: 1px solid var(--ui-border-accent);
  border-radius: var(--ui-radius-full);
  background: transparent;
  color: var(--ui-text-muted);
  font-size: var(--ui-font-size-xs);
  font-family: var(--ui-font);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--ui-transition);
  white-space: nowrap;
}
.ui-filter-btn:hover {
  background: rgba(229,36,255,0.15);
  color: rgba(255,255,255,0.9);
  text-decoration: none;
}
.ui-filter-btn.active {
  background: var(--ui-accent-soft);
  color: #fff;
  border-color: rgba(229,36,255,0.7);
}

/* ——— 15. Topbar (ui-topbar) ——— */
.ui-topbar {
  display: flex;
  align-items: center;
  gap: var(--ui-gap-md);
  padding: 12px 24px;
  background: rgba(10,3,22,0.8);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--ui-line);
  flex-shrink: 0;
  z-index: 10;
  position: relative;
  flex-wrap: wrap;
}

/* ——— 16. Навигация (ui-nav) ——— */
.ui-nav {
  display: flex;
  gap: var(--ui-gap-sm);
  align-items: center;
  flex-wrap: wrap;
}
.ui-nav a,
.ui-nav button {
  padding: 8px 14px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-full);
  background: rgba(255,255,255,0.04);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: var(--ui-font-size-sm);
  text-decoration: none;
  transition: all var(--ui-transition);
}
.ui-nav a:hover,
.ui-nav button:hover {
  background: var(--ui-surface-hover);
  border-color: var(--ui-border-accent);
  text-decoration: none;
}
.ui-nav a.is-active,
.ui-nav button.is-active {
  background: linear-gradient(135deg, rgba(229,36,255,0.5), rgba(229,36,255,0.3));
  border-color: transparent;
  color: #fff;
}

/* ——— 17. Уведомления (ui-notif) ——— */
.ui-notif-wrap {
  position: relative;
  flex-shrink: 0;
}
.ui-notif-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(90,40,170,0.45);
  border: 1px solid rgba(210,170,255,0.7);
  color: #e6d4ff;
  cursor: pointer;
  transition: all var(--ui-transition);
  position: relative;
}
.ui-notif-btn:hover {
  background: #7a4bc2;
  color: #fff;
  box-shadow: var(--ui-shadow-glow);
  transform: scale(1.05);
}
.ui-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff4444;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ui-notif-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: rgba(10,5,30,0.97);
  border: 1px solid rgba(229,36,255,0.3);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-md);
  z-index: 1000;
  overflow: hidden;
}
.ui-notif-dropdown.open { display: block; }
.ui-notif-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ui-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ui-notif-items { max-height: 320px; overflow-y: auto; }
.ui-notif-item {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  text-decoration: none;
  transition: background var(--ui-transition);
}
.ui-notif-item:hover {
  background: rgba(229,36,255,0.1);
  text-decoration: none;
}
.ui-notif-item:last-child { border-bottom: none; }

/* ——— 18. Мобильное меню (ui-mobile-nav) ——— */
.ui-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
}
.ui-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  transition: all var(--ui-transition);
}
.ui-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.ui-hamburger.open span:nth-child(2) { opacity: 0; }
.ui-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

.ui-mobile-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  background: rgba(10,5,30,0.98);
  backdrop-filter: blur(20px);
  border-left: 1px solid var(--ui-line);
  z-index: 2000;
  transition: right 0.3s ease;
  padding: 0;
  overflow-y: auto;
}
.ui-mobile-nav.open { right: 0; }
.ui-mobile-nav__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ui-border);
}
.ui-mobile-nav__close {
  background: none;
  border: none;
  color: var(--ui-text-muted);
  font-size: 22px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.ui-mobile-nav a {
  display: block;
  padding: 14px 20px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-family: var(--ui-font);
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.2s, color 0.2s;
}
.ui-mobile-nav a:hover {
  background: rgba(229,36,255,0.12);
  color: #fff;
  text-decoration: none;
}
.ui-mobile-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1999;
}
.ui-mobile-overlay.open { display: block; }

/* ——— 19. Profile chip ——— */
.ui-profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: var(--ui-font-size-sm);
  padding: 8px 16px;
  border-radius: var(--ui-radius-full);
  border: 1px solid rgba(200,160,255,0.5);
  background: rgba(90,40,170,0.3);
  backdrop-filter: blur(8px);
  transition: all var(--ui-transition);
  flex-shrink: 0;
  white-space: nowrap;
}
.ui-profile-chip:hover {
  border-color: rgba(229,36,255,0.7);
  background: rgba(130,60,220,0.5);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--ui-shadow-glow);
  transform: scale(1.02);
}

/* ——— 20. Search form ——— */
.ui-search {
  flex: 1;
  display: flex;
  max-width: 500px;
  min-width: 200px;
}
.ui-search input {
  flex: 1;
  padding: 12px 20px;
  border: 1px solid rgba(190,140,255,0.6);
  border-radius: 50px 0 0 50px;
  background: rgba(25,12,45,0.8);
  color: #f2e9ff;
  font-family: var(--ui-font);
  font-size: var(--ui-font-size-base);
  outline: none;
  backdrop-filter: blur(10px);
  transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}
.ui-search input::placeholder { color: #b099e0; }
.ui-search input:focus {
  border-color: #d0a8ff;
  box-shadow: 0 0 20px rgba(159,110,255,0.3);
}
.ui-search button {
  padding: 12px 20px;
  border: 1px solid rgba(190,140,255,0.6);
  border-left: none;
  border-radius: 0 50px 50px 0;
  background: rgba(110,50,200,0.4);
  color: #e6d4ff;
  cursor: pointer;
  font-family: var(--ui-font);
  font-weight: 600;
  font-size: var(--ui-font-size-sm);
  transition: background var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition);
  white-space: nowrap;
}
.ui-search button:hover {
  background: rgba(150,80,255,0.7);
  box-shadow: 0 0 16px rgba(181,126,255,0.4);
  transform: scale(1.02);
}

/* ——— 21. Game cards (ui-game-card) ——— */
.ui-game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 175px;
  height: 175px;
  border-radius: 50%;
  background: rgba(40,20,75,0.6);
  border: 2px solid var(--ui-line);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  text-decoration: none;
  transition: all var(--ui-transition);
  position: relative;
  backdrop-filter: blur(8px);
  padding: 14px;
  text-align: center;
}
.ui-game-card:hover {
  background: rgba(130,70,230,0.4);
  border-color: var(--ui-accent);
  box-shadow: var(--ui-shadow-glow);
  transform: scale(1.05);
  text-decoration: none;
}
.ui-game-card__title {
  font-family: var(--ui-font);
  font-weight: bold;
  color: var(--ui-purple-light);
  text-align: center;
  font-size: var(--ui-font-size-sm);
}
.ui-game-card__desc {
  font-style: italic;
  color: var(--ui-text-muted);
  text-align: center;
  font-size: var(--ui-font-size-xs);
  margin-top: 4px;
}

/* ——— 22. Адаптивность ——— */
@media (max-width: 768px) {
  .ui-topbar {
    padding: 10px 60px 10px 16px;
    gap: 8px;
  }
  .ui-topbar .ui-search {
    order: 2;
    width: 100%;
    min-width: 0;
  }
  .ui-topbar .ui-search input { padding: 8px 14px; font-size: 16px; }
  .ui-topbar .ui-search button { padding: 8px 14px; }
  .ui-topbar .ui-profile-chip { display: none; }
  .ui-topbar .ui-notif-wrap { margin-left: auto; }

  .ui-hamburger {
    display: flex;
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 1500;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(90,40,170,0.35);
    border: 1px solid rgba(200,160,255,0.4);
    justify-content: center;
    align-items: center;
  }
  .ui-hamburger span { background: #e6d4ff; }

  .ui-notif-dropdown {
    position: fixed;
    top: auto;
    bottom: 80px;
    left: 16px;
    right: 16px;
    width: auto;
    max-width: 360px;
  }

  .ui-section { padding: var(--ui-gap-md); }

  .ui-grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }
  .ui-card__media,
  .ui-card__placeholder { height: 110px; }
  .ui-card__body { padding: 10px; }
  .ui-card__title { font-size: var(--ui-font-size-sm); }

  .ui-filter-bar {
    gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .ui-filter-bar::-webkit-scrollbar { display: none; }
  .ui-filter-btn { flex-shrink: 0; padding: 7px 14px; }

  .ui-game-card {
    width: 140px;
    height: 140px;
  }
}

@media (max-width: 480px) {
  .ui-grid--auto {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ui-card__media,
  .ui-card__placeholder { height: 90px; }
  .ui-game-card {
    width: 120px;
    height: 120px;
  }
  .ui-game-card__title { font-size: 11px; }
  .ui-game-card__desc { font-size: 10px; }
}

/* ——— 23. Deprecated wrappers (обратная совместимость) ——— */
/* Старые классы остаются рабочими, но используют ui-* токены */
.site-shell { /* noop, для будущей оболочки */ }
.site-header { /* noop */ }
.site-nav    { /* noop */ }