/* ============================
   ДЕРЕВО ПРОФЕССИЙ – НОВАЯ ВЕРСИЯ (ВАРИАНТ D: AZURE BLUE) — FIXED + ONE-COLUMN BRANCH ALIGN
   - чётко в один вертикальный ряд, если ветка одна (1 колонка)
   - не ломает старую логику (ветки с 2 колонками не трогаем)
   ============================ */

/* Шапка страницы умений */
.sv-skills-header { margin-bottom: 28px; }
.sv-skills-header .sv-heading-h2 { margin-bottom: 10px; }
.sv-skills-subtitle { margin: 0; font-size: 0.95rem; line-height: 1.55; color: rgba(255, 255, 255, 0.8); max-width: 780px; }

/* Блок "ДЕРЕВО ПРОФЕССИЙ" */
.sv-skills-trees { margin: 40px 0 60px; }
.sv-skills-trees-heading { margin-top: 10px; margin-bottom: 20px; }
.sv-skills-tree-title { font-size: 1.15rem; font-weight: 600; color: #fff; margin-bottom: 6px; }
.sv-skills-tree-note { font-size: 0.88rem; color: rgba(255,255,255,0.65); margin: 0; }

/* Заголовок блока (label + title + sub) */
.sv-class-tree-header { margin-bottom: 20px; text-align: center; }
.sv-class-tree-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.6); }
.sv-class-tree-title { font-size: 1.4rem; color: #ffffff; margin-top: 4px; }
.sv-class-tree-sub { margin-top: 6px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); }

/* Общий контейнер двух деревьев */
.sv-class-diagram { display: flex; flex-direction: column; gap: 56px; }

/* Один блок (Fighter / Mage) */
.sv-class-diagram-block {
  padding: 22px 20px 26px;
  border-radius: 20px;
  background: radial-gradient(circle at top, rgba(255,255,255,0.04), rgba(0,0,0,0.9));
  border: 1px solid rgba(255,255,255,0.07);
}

/* Корневой класс */
.sv-class-root { display: flex; justify-content: center; margin-bottom: 26px; }
.sv-class-node { text-align: center; text-decoration: none; color: #ffffff; }
.sv-class-node-meta { margin-top: 2px; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); }

/* Иконки */
.sv-class-icon {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: radial-gradient(
    circle at 30% 20%,
    rgba(80, 160, 255, 0.30),
    transparent 60%
  );
  box-shadow: 0 0 18px rgba(0,0,0,0.8);
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, filter 0.18s ease-out;
}

/* AZURE: без ободка в обычном состоянии (псевдоэлемент нужен для glow на hover) */
.sv-class-icon::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.18s ease-out, box-shadow 0.18s ease-out;
}

/* ОЛЬКО свечение при наведении (без inset-контура) */
.sv-class-node:hover .sv-class-icon::before {
  box-shadow:
    0 0 22px rgba(95, 160, 255, 0.28),
    0 0 40px rgba(85, 150, 255, 0.22);
  opacity: 1;
}

/* AZURE: внутренний тонкий ободок */
.sv-class-icon::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(210, 235, 255, 0.14);
  opacity: 0.92;
}

.sv-class-icon img {
  max-width: 82%;
  max-height: 82%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 0 6px rgba(255,255,255,0.10);
  position: relative;
  z-index: 2;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, filter 0.18s ease-out;
}

/* Маленькая иконка */
.sv-class-icon--small { width: 68px; height: 68px; margin: 0 auto 6px; }

/* Название */
.sv-class-node-name { font-size: 0.86rem; line-height: 1.2; }

/* Ветки */
.sv-class-branches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  justify-content: center;
}

.sv-class-branch {
  padding: 14px 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Заголовок ветки */
.sv-branch-header { margin-bottom: 12px; display: flex; justify-content: center; }

.sv-class-node--branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

/* 1-я профессия (верх ветки) */
.sv-class-node--branch .sv-class-icon { width: 76px; height: 76px; margin: 0 auto 6px; }
.sv-class-node--branch .sv-class-node-name { font-size: 0.95rem; }

/* Колонки внутри ветки */
.sv-branch-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  column-gap: 16px;
  row-gap: 10px;
  justify-items: center;
  justify-content: center; /* ентрируем грид внутри ветки */
}

.sv-branch-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 120px;
}

.sv-branch-col .sv-class-node--chain { width: 100%; max-width: 170px; }

/* ВЕЛИЧЕНИЕ ИКОНОК 2-й и 3-й профессии (внутри колонок ветки) */
.sv-branch-col .sv-class-icon--small {
  width: 72px;
  height: 72px;
}

/* =========================================
   FIX: если в ветке ОДНА колонка — строго один вертикальный ряд
   (не влияет на ветки с 2 колонками)
   ========================================= */
.sv-branch-cols > .sv-branch-col:only-child {
  width: 100%;
  max-width: 170px;
  margin: 0 auto;
  align-items: center;
}

.sv-branch-cols > .sv-branch-col:only-child .sv-class-node--chain {
  margin: 0 auto;
}

/* Hover-эффект (синий) */
.sv-class-node:hover .sv-class-icon {
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 0 18px rgba(0,0,0,0.85),
    0 0 34px rgba(95, 160, 255, 0.26);
  filter: saturate(1.10);
}

.sv-class-node:hover .sv-class-icon img {
  transform: scale(1.04);
  box-shadow: 0 0 14px rgba(125, 185, 255, 0.14);
  filter: contrast(1.05);
}

/* АДАПТИВ */
@media (max-width: 991px) {
  .sv-class-branches-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-class-diagram-block { padding: 18px 14px 22px; }
}

@media (max-width: 768px) {
  .sv-class-branches-grid { grid-template-columns: 1fr; }
  .sv-class-diagram-block { padding: 16px 10px 20px; }
  .sv-class-tree-title { font-size: 1.2rem; }

  .sv-class-icon { width: 86px; height: 86px; }

  .sv-class-icon--small { width: 64px; height: 64px; }
  .sv-branch-col .sv-class-icon--small { width: 68px; height: 68px; }
  .sv-class-node--branch .sv-class-icon { width: 72px; height: 72px; }
}

@media (max-width: 480px) {
  .sv-class-branch { padding: 12px 12px 14px; }

  .sv-branch-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px;
    row-gap: 10px;
  }

  /*сли колонка одна — переопределяем на 1 колонку */
  .sv-branch-cols > .sv-branch-col:only-child {
    grid-column: 1 / -1;
    max-width: 170px;
    margin: 0 auto;
  }

  .sv-branch-col { min-width: 0 !important; }
  .sv-branch-col .sv-class-node--chain { max-width: 100% !important; }

  .sv-class-node-name { font-size: 0.84rem; }
  .sv-class-node-meta { font-size: 0.72rem; }

  .sv-class-icon { width: 84px; height: 84px; }

  .sv-class-icon--small { width: 62px; height: 62px; }
  .sv-branch-col .sv-class-icon--small { width: 66px; height: 66px; }

  .sv-class-node--branch .sv-class-icon { width: 70px; height: 70px; }
}

/*навигация по расам*/

/* ===== RACE NAV — улучшенный вариант табов ===== */

.sv-race-nav {
  position: sticky;
  top: 12px;
  z-index: 50;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;

  padding: 8px;
  margin: 14px 0 18px;

  border-radius: 16px;
  background: rgba(18, 22, 30, 0.92);
  border: 1px solid rgba(255,255,255,0.09);

  /* чуть глубины */
  box-shadow:
    0 10px 30px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.05);

  backdrop-filter: blur(10px);
}

/* кнопки */
.sv-race-btn {
  height: 42px;
  border-radius: 12px;

  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);

  color: rgba(255,255,255,0.86);
  font-size: 0.98rem;     /* ✅ увеличили */
  font-weight: 600;
  letter-spacing: 0.2px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  user-select: none;

  transition:
    transform .12s ease,
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}

/* 🔥 более интересный hover */
.sv-race-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}

/* активная */
.sv-race-btn.is-active {
  background: rgba(120,180,255,0.16);
  border-color: rgba(120,180,255,0.38);
  color: #fff;

  /* "таб" снизу + мягкое свечение */
  box-shadow:
    inset 0 -2px 0 rgba(120,180,255,0.95),
    0 10px 22px rgba(120,180,255,0.10);
}

/* focus для клавиатуры (полезно и красиво) */
.sv-race-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(120,180,255,0.28),
    inset 0 -2px 0 rgba(120,180,255,0.95);
}

/* ===== Мобилка: ровная адаптация ===== */

/* 1) телефоны: сетка 2 колонки (кнопки крупнее, кликабельнее) */
@media (max-width: 640px) {
  .sv-race-nav {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
  }

  .sv-race-btn {
    height: 46px;
    font-size: 1.02rem;
    border-radius: 14px;
  }
}

/* 2) очень узкие (320px): 1 колонка — чтобы не было давки */
@media (max-width: 360px) {
  .sv-race-nav {
    grid-template-columns: 1fr;
  }
}

/* 3) планшеты/малые ноуты: чуть компактнее, но всё ровно */
@media (min-width: 641px) and (max-width: 900px) {
  .sv-race-btn {
    height: 40px;
    font-size: 0.95rem;
  }
}