.section-header {
    padding-left: 20px;
    font-size: 0.8em;
    font-weight: 500;
    color: #8e9cb0;
}
.section-header-count {
    color: #db0000;
  font-weight: 500;
  margin-left: 5px;
}

/* ==================== КОНТЕЙНЕР КОМБИНАЦИЙ ==================== */


.position-tag {
  background: #f7ff5657;
  border-radius: 12px;
  color: #525252;
  display: inline-block;
  font-size: 10px;
  margin: 0 2px;
  padding: 2px 8px;
    border: 0.8px solid #989898;
}

/* Стили для результата слияния */

.result-wood { color: var(--wood); }
.result-fire { color: var(--fire); }
.result-earth { color: var(--earth); }
.result-metal { color: var(--metal); }
.result-water { color: var(--water); }

.interaction-result {
    display: block;

  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  padding: 2px 5px;

    background: rgba(242, 250, 242, 0.95);
    border: 1px solid rgba(200, 225, 200, 0.9);
}

.no-interactions {
    background: #f8f9fa;
    color: #9ca3af;
    font-size: 12px;
    text-align: center;  
    padding: 20px 28px;
    border: 1px dashed #e5e7eb;
    border-radius: 12px;
}





/* ------------------------------------ */
/* Основной контейнер для всех карточек */
/* ------------------------------------ */

.cards-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    
    /* background-color: #f0f2f5;
    border-radius: 12px;
    border: 2px solid #e4e4e4;
    box-sizing: border-box; */
}

/* Карточка с фиксированными размерами */
.combinations-block {
    background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
    border-radius: 10px;
    padding: 8px 4px;
    color: #2d3748;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.combinations-block:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.04);
    cursor: pointer;
}

/* Конфликт - мягкий красный */
.combinations-block[data-type="conflict"] {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe9e9 100%);
    border-color: #f8d7d7;
}

.combinations-block[data-type="conflict"]:hover {
    background: linear-gradient(135deg, #ffebeb 0%, #ffe0e0 100%);
    border-color: #f0c0c0;
}

/* Гармония - мягкий зеленый */
.combinations-block[data-type="merge"] {
    background: linear-gradient(135deg, #f0f7f0 0%, #e6f0e6 100%);
    border-color: #d0e0d0;
}

.combinations-block[data-type="merge"]:hover {
    background: linear-gradient(135deg, #e6f0e6 0%, #dceadc 100%);
    border-color: #b8d0b8;
}

/* Вред - мягкий оранжевый */
.combinations-block[data-type="harm"] {
    background: linear-gradient(135deg, #fff2e5 0%, #ffe8d6 100%);
    border-color: #fed7b5;
}

.combinations-block[data-type="harm"]:hover {
    background: linear-gradient(135deg, #ffe8d9 0%, #fedec6 100%);
    border-color: #fdc4a0;
}

/* Наказание - мягкий красный (чуть темнее конфликта) */
.combinations-block[data-type="self-punishment"] {
    background: linear-gradient(135deg, #ffeaea 0%, #ffdddd 100%);
    border-color: #f5c6c6;
}

.combinations-block[data-type="self-punishment"]:hover {
    background: linear-gradient(135deg, #ffdddd 0%, #ffd1d1 100%);
    border-color: #ecb3b3;
}

/* Сезон - мягкий синий */
.combinations-block[data-type="season"] {
    background: linear-gradient(135deg, #e6f0fa 0%, #d9e9f5 100%);
    border-color: #c2d9eb;
}

.combinations-block[data-type="season"]:hover {
    background: linear-gradient(135deg, #d9e9f5 0%, #cde2f2 100%);
    border-color: #adcbe3;
}

/* Контейнер для животных - универсальный гармоничный цвет */
.animals-row {
    background: rgba(248, 250, 252, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 6px;
    border: 1px solid rgba(220, 230, 245, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    width: 100%;
    /* Легкая тень для глубины */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Адаптация animals-row под каждый тип карточки для гармонии */
.combinations-block[data-type="conflict"] .animals-row {
    background: rgba(255, 247, 247, 0.95);
    border-color: rgba(245, 210, 210, 0.9);
}

.combinations-block[data-type="merge"] .animals-row {
    background: rgba(242, 250, 242, 0.95);
    border-color: rgba(200, 225, 200, 0.9);
}

.combinations-block[data-type="harm"] .animals-row {
    background: rgba(255, 245, 235, 0.95);
    border-color: rgba(250, 215, 185, 0.9);
}

.combinations-block[data-type="self-punishment"] .animals-row {
    background: rgba(255, 242, 242, 0.95);
    border-color: rgba(240, 200, 200, 0.9);
}

.combinations-block[data-type="season"] .animals-row {
    background: rgba(235, 245, 252, 0.95);
    border-color: rgba(190, 215, 235, 0.9);
}

/* Блок каждого животного */
.animal-item {
    text-align: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
}

/* Название животного */
.animal-name {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: #1a202c;
    margin-bottom: 0px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
      min-width: 0;
}

/* Тип животного */
.animal-type {
    font-weight: 500;
    text-transform: uppercase;
    background: #e9edf5;
    color: #4a5568;
    border-radius: 20px;
    display: inline-block;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* Легкая тень для объема */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    font-size: clamp(8px, 2vw, 8px);
    padding: 0.2em 0.6em;
}

.animal-type.position-tag {
  background: #f7ff5657 !important;
    border: 0.8px solid #989898;
}

/* Адаптация animal-type под тип карточки */
.combinations-block[data-type="conflict"] .animal-type {
    background: #ffefef;
    color: #9f7a7a;
}

.combinations-block[data-type="merge"] .animal-type {
    background: #e8f0e8;
    color: #2d6a4f;
}

.combinations-block[data-type="harm"] .animal-type {
    background: #fff0e5;
    color: #b77e5a;
}

.combinations-block[data-type="self-punishment"] .animal-type {
    background: #ffe8e8;
    color: #b35f5f;
}

.combinations-block[data-type="season"] .animal-type {
    background: #e3eef8;
    color: #2c5f8a;
}

/* Нижняя часть карточки */
.combination-footer {
    text-align: center;
    padding: 2px 0 0 0;
    width: 100%;
}

/* defaultLabel */
.combination-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: #334155;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Текст с животными */
.combination-text {
    margin: 0;
    font-size: 8px;
    font-weight: 500;
    line-height: 1.4;
    color: #6e7988;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Адаптивность */
@media (max-width: 550px) {
    .cards-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 350px) {
    .cards-container {
        grid-template-columns: 2fr;
    }
}