/* ====== Фон страницы ====== */
body {
  /* Путь от style.css до images/bg.jpg */
  background: url("./images/bg.jpg") center center / cover no-repeat fixed;
}

/* ====== Базовые ====== */
* { box-sizing:border-box; margin:0; padding:0; }

/* ====== Шапка ====== */
header.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.75rem 1rem;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
  position: relative;
  overflow: visible;
}

/* навигация сдвинута и жирный шрифт */
header nav {
  margin-right: 7rem;
  font-weight: bold;
}
header nav a {
  margin-left:1rem;
  text-decoration:none;
  color:#444;
  padding-bottom:0.25rem;
}
header nav a.active {
  color:#2563eb;
  border-bottom:2px solid #2563eb;
}

/* логотип поверх фона */
.logo-overlay {
  position: absolute;
  top: 4.5rem;
  left: 1rem;
  z-index: 1;
}
.logo-overlay img {
  display: block;
  width: 380px;
  height: auto;
  pointer-events: none;
}

/* стили для текстового лого и слогана */
header .logo { font-size:1.25rem; font-weight:bold; }
header .logo.slogan {
  font-size: 1.3rem;
  font-weight: 300;
  color: #555;
  white-space: nowrap;
}

/* ====== Контейнер и секции ====== */
.container {
  max-width:960px;
  margin:2rem auto;
  padding:0 1rem;
}
.section {
  background:#fff;
  border-radius:8px;
  padding:1rem;
  margin-bottom:1.5rem;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
.section h2 { margin-bottom:1rem; }

/* inputs & buttons */
input, select {
  width:100%;
  padding:0.5rem;
  margin-bottom:0.75rem;
  border:1px solid #ccc;
  border-radius:4px;
  font-size:1rem;
}
button {
  width:100%;
  padding:0.75rem;
  background:#2563eb;
  color:#fff;
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-size:1rem;
}

/* ====== Герои ====== */
#heroesContainer .category-block {
  margin-bottom:1rem;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,0.1);
}
.category-block .header {
  background:#e5e7eb;
  padding:0.75rem 1rem;
  font-weight:600;
  cursor:pointer;
}
/* по умолчанию все блоки скрыты */
.category-block .cards {
  display: none;
  padding:1rem;
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(4px);
  gap:10px;
  grid-auto-rows:auto;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
}
/* только когда открыт — показываем сеткой */
.category-block .cards.open {
  display: grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;
}
.hero-card {
  background:#1f2937;
  color:#fff;
  border-radius:6px;
  text-align:center;
  padding-bottom:0.5rem;
}
.hero-card img,
.hero-card .img-placeholder {
  width:100%;
  height:100px;
  border-radius:4px;
  object-fit:cover;
  margin-bottom:0.5rem;
}
.hero-card .img-placeholder {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#374151;
  color:#9ca3af;
  font-size:0.9rem;
}
.hero-card .name {
  margin-bottom:0.5rem;
  font-weight:600;
}
.hero-card select {
  width:90%;
  margin:0.25rem 0;
  padding:0.25rem;
  border:none;
  border-radius:4px;
}

/* ====== Секция «Список демонов» ====== */
#demonsContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.demon-card {
  background: #1f2937;
  padding: 0.5rem;
  border-radius: 8px;
  text-align: center;
  color: #fff;
}
.demon-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
/* Прячем любую подпись демона */
.demon-card .name,
.demon-card .demon-name {
  display: none;
}

.demon-card label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.demon-card select {
  width: 100%;
  padding: 0.25rem;
  border: none;
  border-radius: 4px;
  background: #fff;
  color: #000;
}
/* ====== Привязка «Пробуды» к нижнему краю картинки и удаление фона ====== */
.demon-card {
  position: relative; /* для точного позиционирования */
}

.demon-card img {
  display: block;
  margin-bottom: 0; /* убираем отступ под картинкой */
}

.demon-card label {
  position: absolute;
  bottom: 0.5rem;      /* чуть отступаем от низа карточки */
  left: 50%;
  transform: translateX(-50%);
  background: transparent;  /* убираем серый фон */
  padding: 0;               /* убираем внутренние отступы */
  margin: 0;                /* убираем внешние отступы */
  color: #fff;              /* цвет текста (если нужно) */
  text-align: center;
  width: calc(100% - 1rem); /* подгоняем ширину под картинку */
}

.demon-card select {
  width: 100%;
  margin: 0;       /* убираем отступы вокруг селекта */
  padding: 0.25rem;
  background: #fff; /* если нужен фон у выпадашки */
  border-radius: 4px;
  box-sizing: border-box;
}

/* ====== Привязки ====== */
.binding-row {
  display: grid;
  grid-template-columns:200px 30px 100px auto;
  column-gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}
.binding-row > label:nth-child(1),
.binding-row > label:nth-child(4) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.binding-row > label:nth-child(2) {
  justify-self: center;
}
.binding-row input[type="number"],
.binding-row select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.binding-row .out {
  width: 80px;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}