/* GLOBAL */
 body {
     margin: 0;
     padding: 0;
     font-family: 'Cinzel', serif;
     background: url('../pic/enemy_pic.webp') no-repeat center center fixed;
     background-size: cover;
     color: #e5e5e5;
     overflow-x: hidden;
 }

 .background-fog {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.65);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);

     z-index: -1;
 }

 /* CONTENT */
 .content {
     margin: 0 auto;
     max-width: 1400px;
     /* Увеличили макс. ширину, чтобы влезло больше крупных картинок */
     padding: 60px 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 h1 {
     text-align: center;
     font-size: 56px;
     /* Чуть увеличили заголовок */
     margin-bottom: 50px;
     text-shadow: 0 0 15px black;
 }

 .category-section {
     margin-bottom: 100px;
     /* Увеличили отступ между категориями (Драконы -> Животные) */
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 h2.category-title {
     font-size: 38px;
     margin-bottom: 40px;
     /* Увеличили отступ от заголовка до картинок */
     text-shadow: 0 0 10px black;
     text-align: center;
 }

 /* CATEGORY LIST */
 .category-list {
     display: flex;
     flex-wrap: wrap;
     gap: 40px;
     /* Увеличили расстояние МЕЖДУ картинками */
     justify-content: center;
     width: 100%;
 }

 /* CATEGORY ITEM — УВЕЛИЧЕННЫЙ РАЗМЕР */
 .category-item {
     width: 300px;
     /* Было 220px — теперь картинки крупнее */
     height: 380px;
     /* Было 280px */
     border-radius: 15px;
     overflow: hidden;
     position: relative;
     cursor: pointer;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
     transition: transform 0.4s, box-shadow 0.4s;
     text-decoration: none;
 }

 .category-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: 0.6s;
 }

 /* Hover effect */
 .category-item:hover {
     transform: translateY(-10px) scale(1.03);
     /* Теперь карточка чуть «всплывает» */
     box-shadow: 0 15px 40px black;
 }

 .category-item:hover img {
     filter: blur(2px) brightness(0.7);
     transform: scale(1.1);
 }

 /* LABEL */
 .category-info {
     position: absolute;
     bottom: 0;
     width: 100%;
     padding: 20px 0;
     /* Увеличили плашку с текстом */
     background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
     color: #fff;
     font-size: 18px;
     /* Текст стал крупнее */
     text-align: center;
     opacity: 0;
     transform: translateY(20px);
     transition: 0.4s;
 }

 .category-item:hover .category-info {
     opacity: 1;
     transform: translateY(0);
 }

 /* Кнопка */
 .back-btn {
     position: fixed;
     right: 30px;
     bottom: 30px;
     background: #2d2d2d;
     color: #fff;
     padding: 15px 25px;
     border-radius: 8px;
     font-size: 18px;
     text-decoration: none;
     transition: 0.3s;
     z-index: 100;
     border: 1px solid #555;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
 }

 .back-btn:hover {
     background: #eee;
     color: #111;
 }