@font-face {
	font-family: 'VeraCrouz'; 
	src: url(./VeraCrouz.ttf); 
}
@font-face {
	font-family: 'CyrillicGoth'; 
	src: url(./CyrillicGoth.ttf); 
}
html, body {
    overflow-x: hidden; 
}

* {
    box-sizing: border-box; 
}

body {background: #000;
    background-image: url(../image/fon1.jpg);
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: cover;
	background-attachment: fixed;
    padding: 0px 5%;}

main {    max-width: 1150px !important;
    height: 100%;
    min-height: calc(100svh - 50px);
    margin:0 auto;
    background: url(../image/fon2.png);
    background-repeat: repeat;
    
    }
hr {width:50%;
    color: black;
    background-color: black;
    height: 1px;
    border: none;}
header {
    display:flex;
    flex-wrap:wrap;

    background-repeat: no-repeat;
    background-size: 90% 100%;
    background-position-x: 50%;
    width: 110%;
    margin-left: -5%;
  }

  .col{
    width:calc( ( 110% - 40px ) / 3 );
    margin:0 0 20px;
    height: 100%;
    display: flex;
    align-content: center;
    align-items: center;
  }
.col div img {width: 100%;}
.col div {width:50%}
.col:nth-child(3n-1) img {width:100%}
  .col:nth-child(3n-1){
    margin-left:20px;
    margin-right:20px;
    width:calc( ( 80% - 40px ) / 3 );
    display: inline;
    
  }
.title h1 {font-family: 'VeraCrouz'; 
	font-size: 56px;
	text-align: center;
	color: #1e0d07d9;}
.scrollToTopBtn {
    background-color: transparent; /* Убираем черный фон */
    background-image: url('../image/up.png'); /* Путь к картинке (выходим из папки css и идем в image) */
    background-size: contain; /* Картинка впишется ровно в заданные 48px */
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    color: transparent; /* Делаем невидимой старую текстовую стрелочку "↑" */
    cursor: pointer;
    width: 48px;
    height: 48px; /* Обязательно задаем высоту, так как убрали line-height */
    position: fixed;
    bottom: 140px;
    right: 40px;
    z-index: 100;
    transform: translateY(100px);
    transition: all 0.5s ease;
}

/* Можем добавить магический эффект при наведении (по желанию) */
.scrollToTopBtn:hover {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)); /* Золотистое свечение */
}

.showBtn {
  opacity: 1;
  transform: translateY(0);
}
.main_block{text-align: center;}
.footer {    bottom: 70px;
  padding: 30px 0px;
  width: 100%;
  max-width: 1150px !important;}

  .name {font-family: 'CyrillicGoth'; 
    font-size: 35px;
    text-align: center;}

.diffiramb {font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
padding:20px 70px;}
.diffiramb p{text-align:left;}
.diffiramb p:last-child{text-align:right; margin-bottom:20px; font-weight: bold;}

.late {font-weight: 600;
  color:#000000b3;
  font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;
  }
.group_diff p {font-weight: 600; font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;}
.group_diff a {    color: #251400;
  font-family: 'VeraCrouz';
  font-size: 50px;
  text-align: left;
  text-decoration: underline 1px;}

.list a {font-family: 'VeraCrouz';
  font-size: 50px;
  padding: 10px;
  text-decoration: none;
  display: block;}

/* ============================================================
   ЦВЕТА ФАКУЛЬТЕТОВ И КАТЕГОРИЙ (Заголовки и списки)
   ============================================================ */

/* --- ГРИФФИНДОР --- */
.gryff, 
.name.gryff { color: #880000; }
.list .gryff:nth-child(2n-1) { color: #470000; } /* Имя 1 (нечетные) */
.list .gryff:nth-child(2n)   { color: #6f0000; } /* Имя 2 (четные) */

/* --- КОГТЕВРАН --- */
.kog, 
.name.kog { color: #0d4458; }
.list .kog:nth-child(2n-1) { color: #437f94; }
.list .kog:nth-child(2n)   { color: #0d4458; }

/* --- ПУФФЕНДУЙ --- */
.haff, 
.name.haff { color: #c38200; }
.list .haff:nth-child(2n-1) { color: #4f3700; }
.list .haff:nth-child(2n)   { color: #855900; }

/* --- СЛИЗЕРИН --- */
.slyze, 
.name.slyze { color: #293e1e; }
.list .slyze:nth-child(2n-1) { color: #293e1e; }
.list .slyze:nth-child(2n)   { color: #22562d; }

/* --- ОБИТАТЕЛИ --- */
.residents, 
.name.residents { color: #656565; }
.list .residents:nth-child(2n-1) { color: #09050d; }
.list .residents:nth-child(2n)   { color: #656565; }

/* --- КОЛЛЕКТИВНЫЕ --- */
.group, 
.name.group { color: #656565; }
.list .group:nth-child(2n-1) { color: #09050d; }
.list .group:nth-child(2n)   { color: #656565; }

.face {    display: flex;
    flex-wrap: nowrap;
    align-content: space-around;
    justify-content: center;
    align-items: center;
    width: 80%;
    margin: 0 auto;}

.col_main {flex: 1; 
    min-width: 0; 
    text-align: center;}
.col_main a img {max-width:270px;}
.p1 a img{margin:30px 0;}
.mob {display: none !important;}
 @media (max-width: 1150px) {
 .mob {display: flex !important;
  align-items: flex-start;}
.pc {display: none !important;}
 }

  @media (max-width: 768px) {

    .name {font-size: 26px;}
    .group_diff p {font-size: 18px; padding:0px 5px;}
    .group_diff a {font-size: 36px;}
    .list a {font-size: 36px;}
    .diffiramb {padding:20px;}
    .late {      font-size: 18px;padding:0px 5px;}
.col_main a img {max-width:90%;}

  }
.face_page {margin:0 auto;
    max-width:100%;
    }
	
	/* ============================================================
   ADMIN PANEL STYLES 
   ============================================================ */
.admin-body { color: #333;
    font-family: sans-serif;
    padding: 20px;
    background: url(../image/admin.png);
    background-size: cover;
    background-attachment: fixed; }
.admin-container { max-width: 1000px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.admin-nav { border-bottom: 2px solid #eee; margin-bottom: 20px; padding-bottom: 10px; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.admin-table th, .admin-table td { text-align: left; padding: 12px; border-bottom: 1px solid #eee; }
.admin-table tr:hover { background: #f9f9f9; }
.admin-form-group { margin-bottom: 15px; }
.admin-form-group label { display: block; font-weight: bold; margin-bottom: 5px; }
.admin-input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.admin-btn { padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
.admin-btn-primary { background: #2c3e50; color: #fff; }
.admin-btn-danger { background: #c0392b; color: #fff; }
.admin-btn-add { background: #27ae60; color: #fff; }
.admin-dithyramb-item { border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 4px; position: relative; }
.admin-badge { font-size: 0.8em; padding: 2px 6px; background: #eee; border-radius: 10px; }

/* ============================================================
   АНИМАЦИЯ ШАПКИ
   ============================================================ */

.header-map-container a {
    display: block;
    z-index: 10;
    border-radius: 12px;
}

.header-map-container a .glow-container {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
}

.header-map-container a:hover .glow-container {
    opacity: 1;
}

.header-map-container a .spark {
    position: absolute;
    border-radius: inherit;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.header-map-container a .spark::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 300%; height: 300%;
    transform: translate(-50%, -50%);
}

.header-map-container a:hover .spark::before {
    animation: spin-glow 2.5s linear infinite;
}

/* Главный крупный огонек */
.header-map-container a .spark.main {
    inset: 0; padding: 3px;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 1));
}
.header-map-container a .spark.main::before {
    background: conic-gradient(from 0deg, transparent 70%, rgba(255, 140, 0, 0.4) 85%, #ffd700 98%, #ffffff 100%);
}

/* Искорка 1 (внутри, белая) */
.header-map-container a .spark.t1 {
    inset: 4px; padding: 2px;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
}
.header-map-container a .spark.t1::before {
    background: conic-gradient(transparent 93%, #ffffff 94%, transparent 95%);
}

/* Искорка 2 (снаружи, оранжевая) */
.header-map-container a .spark.t2 {
    inset: -3px; padding: 1.5px;
    filter: drop-shadow(0 0 4px rgba(255, 165, 0, 1));
}
.header-map-container a .spark.t2::before {
    background: conic-gradient(transparent 88%, #ffaa00 89%, transparent 90%);
}

/* Искорка 3 (золотистая, медленная) */
.header-map-container a .spark.t3 {
    inset: 8px; padding: 1.5px;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.8));
}
.header-map-container a .spark.t3::before {
    background: conic-gradient(transparent 80%, #ffd700 81%, transparent 82%);
}

/* Искорка 4 (красноватая искра в хвосте) */
.header-map-container a .spark.t4 {
    inset: -6px; padding: 2px;
    filter: drop-shadow(0 0 4px rgba(255, 69, 0, 0.8));
}
.header-map-container a .spark.t4::before {
    background: conic-gradient(transparent 73%, #ff4500 74%, transparent 75%);
}

@keyframes spin-glow {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Подпись художника */
.artist-signature {
    text-align: center;
    font-style: italic;
    font-size: 0.9em;
    margin-top: 8px;
    color: #555;
    font-family: sans-serif;
}

/* Лайтбокс (увеличение фото) */
/* ============================================================
   ПЛАВНЫЙ ЛАЙТБОКС (УВЕЛИЧЕНИЕ ФОТО)
   ============================================================ */

/* Эффект для портрета при наведении */
.portrait-img {
    cursor: zoom-in;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border-radius: 6px;
	max-width: 360px; height: auto;
	   @media screen and (max-width: 900px) {
       max-width: 90%;
    }
}
.portrait-img:hover {
    transform: scale(1.03);

}

/* Контейнер лайтбокса (скрыт по умолчанию) */
#magic-lightbox {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Темный фон + красивое размытие заднего плана (эффект матового стекла) */
    background: rgba(15, 20, 25, 0.85);
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Плавное появление фона */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    cursor: zoom-out; /* Курсор-лупа с минусом */
}

/* Класс, который JS добавляет при открытии */
#magic-lightbox.active {
    visibility: visible;
    opacity: 1;
}

/* Обертка для самой картинки (для анимации масштаба) */
.lightbox-content {
    position: relative;
    transform: scale(0.85); /* Изначально чуть уменьшена */
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#magic-lightbox.active .lightbox-content {
    transform: scale(1); /* Плавное "выныривание" в нормальный размер */
    opacity: 1;
}

/* Само увеличенное фото */
#lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
 
    object-fit: contain;
}

/* Аккуратный крестик в углу */
.lightbox-close {
    position: absolute;
    top: 25px;
    right: 35px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 45px;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
    line-height: 1;
    user-select: none;
}

.lightbox-close:hover {
    color: #ffffff;
    transform: scale(1.1);
}