:root {
  --bg: #0a0c10;
  --card-bg: rgba(28,30,38,0.85);
  --gold: #ffd966;
  --text: #cdd1d9;
  --muted: #888;
  --radius: 16px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --rank-legat: #f1c40f; --rank-legat-rgb: 241, 196, 15;
  --rank-adjutant: #00cec9; --rank-adjutant-rgb: 0, 206, 201;
  --rank-centurion: #e74c3c; --rank-centurion-rgb: 231, 76, 60;
  --rank-legioner: #3498db; --rank-legioner-rgb: 52, 152, 219;
  --rank-novice: #bdc3c7; --rank-novice-rgb: 189, 195, 199;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background: radial-gradient(ellipse at center, #1a1e2b 0%, #0a0c10 100%); color: var(--text); font-family: 'Inter', 'Segoe UI', sans-serif; line-height:1.6; overflow-x:hidden; letter-spacing:-0.01em; }
#stars { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.content-wrap { position:relative; z-index:1; }

#preloader {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background: #0a0c10; z-index:99999; display:flex;
  align-items:center; justify-content:center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#preloader.hidden { opacity:0; visibility:hidden; }
#preloader img {
  width:120px; height:120px;
  animation: preloaderPulse 1s ease-in-out infinite, preloaderFlash 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 30px var(--gold));
}
@keyframes preloaderPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
@keyframes preloaderFlash {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #e6c44d; }

.header { background: rgba(17,19,26,0.75); backdrop-filter: blur(20px); padding: 16px 30px; display: flex; align-items: center; box-shadow: 0 4px 30px rgba(0,0,0,0.5); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(255,255,255,0.05); }
.header-left { flex: 1; }
.header-center { flex: 2; display: flex; justify-content: center; align-items: center; }
.header-right { flex: 1; display: flex; justify-content: flex-end; align-items: center; }
.logo { display:flex; align-items:center; gap:12px; }
.logo img { height:44px; filter:drop-shadow(0 0 8px var(--gold)); }
.logo h1 { color:var(--gold); font-size:22px; font-weight:800; }
.slogan { color:var(--muted); font-size:13px; font-style:italic; }
.nav-desktop { display:flex; gap: 6px; }
.nav-desktop a { color: #aaa; text-decoration: none; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 14px; transition: var(--transition); background: transparent; }
.nav-desktop a:hover { background: rgba(255,255,255,0.05); color: var(--gold); }
.user-area { display: flex; align-items: center; gap: 10px; }
.user-area a { color: #aaa; text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 5px; position: relative; }
.user-area a:hover { color: var(--gold); }
.badge { position: absolute; top: -8px; right: -12px; background: red; color: #fff; border-radius: 50%; padding: 2px 5px; font-size: 10px; min-width: 18px; text-align: center; }
.burger { display:none; flex-direction:column; cursor:pointer; gap:5px; background:none; border:none; z-index:201; }
.burger span { display:block; width:28px; height:3px; background:var(--gold); border-radius:3px; }
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; margin-bottom:30px; }
@media (max-width:900px) { .news-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .news-grid { grid-template-columns:1fr; } }
.news-card { background:rgba(28,30,38,0.75); backdrop-filter:blur(15px); border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,0.05); transition:transform 0.4s, box-shadow 0.4s, border-color 0.4s; }
.news-card:hover { transform:translateY(-6px); border-color:var(--gold); box-shadow:0 15px 30px rgba(0,0,0,0.5), 0 0 20px rgba(255,217,102,0.2); }
.news-card img { width:100%; height:220px; object-fit:cover; }
.news-card-body { padding:18px; }
.news-card-date { color:var(--muted); font-size:12px; }
.news-card-title { color:#fff; font-size:18px; font-weight:700; margin:10px 0; }
.news-card-text { color:#b0b5be; font-size:14px; margin-bottom:15px; }
.news-card-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,0.05); padding-top:12px; }
.read-more { color:var(--gold); text-decoration:none; font-weight:700; font-size:13px; }

.rank-title {
  font-size:24px; font-weight:800; margin:40px 0 20px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  text-transform:uppercase; letter-spacing:2px;
}
.rank-title::before, .rank-title::after {
  content:''; height:2px; flex:1;
  background:linear-gradient(90deg, transparent, currentColor, transparent);
  max-width:80px;
}
.rank-legat { color: var(--rank-legat); text-shadow: 0 0 15px var(--rank-legat); }
.rank-adjutant { color: var(--rank-adjutant); text-shadow: 0 0 15px var(--rank-adjutant); }
.rank-centurion { color: var(--rank-centurion); text-shadow: 0 0 15px var(--rank-centurion); }
.rank-legioner { color: var(--rank-legioner); text-shadow: 0 0 15px var(--rank-legioner); }
.rank-novice { color: var(--rank-novice); text-shadow: 0 0 15px var(--rank-novice); }

.member-card {
  backdrop-filter:blur(20px);
  background: rgba(28,30,38,0.4);
  border-radius:var(--radius);
  padding:20px 12px;
  text-align:center;
  border:1px solid rgba(255,255,255,0.15);
  transition:transform 0.4s, box-shadow 0.4s, border-color 0.4s, background 0.4s;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:#000;
  font-weight:700;
}
.member-card:hover {
  transform:translateY(-8px) scale(1.03);
  box-shadow:0 20px 40px rgba(0,0,0,0.6), 0 0 30px currentColor;
  border-color:currentColor;
  background: rgba(28,30,38,0.7);
}
.member-card img { width:64px; height:64px; object-fit:cover; border-radius:50%; border:2px solid currentColor; }
.member-avatar { width:64px; height:64px; border-radius:50%; background:rgba(0,0,0,0.2); display:flex; align-items:center; justify-content:center; color:#555; font-size:24px; border:2px solid currentColor; }
.member-card h4 { color:#000; font-size:15px; font-weight:800; }
.member-class { font-size:12px; font-weight:700; color:#000; display:flex; align-items:center; gap:4px; }
.member-class img { transition: transform 0.3s ease, filter 0.3s ease; animation: iconPulse 2s infinite ease-in-out; }
.member-card:hover .member-class img { animation: iconSpin 0.6s ease-in-out; filter: drop-shadow(0 0 6px #ffd966); }
@keyframes iconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes iconSpin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(15deg) scale(1.2); } 100% { transform: rotate(0deg) scale(1); } }
.member-level { font-size:11px; font-weight:700; color:#000; }
.member-rank { font-size:12px; font-weight:800; letter-spacing:1px; margin:4px 0 8px; padding:4px 14px; border-radius:30px; background:rgba(0,0,0,0.25); backdrop-filter:blur(10px); color:#000; text-transform:uppercase; box-shadow:0 4px 12px rgba(0,0,0,0.2); border:1px solid rgba(0,0,0,0.3); }
.member-card .btn { background:transparent; border:1px solid rgba(0,0,0,0.5); color:#000; padding:6px 14px; font-weight:800; font-size:12px; margin-top:4px; border-radius:8px; }
.member-card .btn:hover { background:#000; color:#fff; border-color:#000; }
.member-card[data-rank="Легат"] { background:rgba(var(--rank-legat-rgb),0.8); --currentColor:var(--rank-legat); }
.member-card[data-rank="Легат"]:hover { background:rgba(var(--rank-legat-rgb),1.0); }
.member-card[data-rank="Адъютант"] { background:rgba(var(--rank-adjutant-rgb),0.8); --currentColor:var(--rank-adjutant); }
.member-card[data-rank="Адъютант"]:hover { background:rgba(var(--rank-adjutant-rgb),1.0); }
.member-card[data-rank="Центурион"] { background:rgba(var(--rank-centurion-rgb),0.8); --currentColor:var(--rank-centurion); }
.member-card[data-rank="Центурион"]:hover { background:rgba(var(--rank-centurion-rgb),1.0); }
.member-card[data-rank="Легионер"] { background:rgba(var(--rank-legioner-rgb),0.8); --currentColor:var(--rank-legioner); }
.member-card[data-rank="Легионер"]:hover { background:rgba(var(--rank-legioner-rgb),1.0); }
.member-card[data-rank="Новичек"] { background:rgba(var(--rank-novice-rgb),0.8); --currentColor:var(--rank-novice); }
.member-card[data-rank="Новичек"]:hover { background:rgba(var(--rank-novice-rgb),1.0); }

.btn {
  display:inline-block;
  background:linear-gradient(135deg, #ffd966, #d4af37);
  color:#0a0c10;
  padding:12px 28px;
  border-radius:6px;
  font-weight:700;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:1px;
  transition:0.3s;
  box-shadow:0 6px 20px rgba(255,217,102,0.4);
  border:none;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.btn:hover {
  transform:translateY(-2px);
  box-shadow:0 0 20px var(--gold), 0 0 40px var(--gold);
  color:#000;
  text-shadow:0 0 5px rgba(0,0,0,0.3);
}
.pagination { display:flex; justify-content:center; gap:10px; margin-top:40px; }
.pagination a { background:var(--card-bg); color:#aaa; padding:10px 18px; border-radius:6px; text-decoration:none; font-weight:600; }
.pagination a.active, .pagination a:hover { background:var(--gold); color:#0a0c10; }
.events-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:25px; }
.event-card { background:var(--card-bg); backdrop-filter:blur(10px); border-radius:var(--radius); padding:20px; border:1px solid rgba(255,217,102,0.1); transition:0.4s; }
.event-card:hover { transform:translateY(-5px); border-color:var(--gold); box-shadow:0 15px 35px rgba(255,217,102,0.2); }
.event-date { color:var(--gold); font-weight:bold; }
img { max-width: 100%; height: auto; }
footer { background:rgba(17,19,26,0.6); backdrop-filter:blur(10px); text-align:center; padding:25px; margin-top:60px; color:#666; font-size:14px; border-top:1px solid rgba(255,255,255,0.05); }

.print-effect span {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: printChar 0.3s forwards;
}
@keyframes printChar {
  to { opacity: 1; transform: translateY(0); text-shadow: 0 0 10px var(--gold); }
}

/* Дополнительные стили для плеера, золотой пыли, кнопки наверх */
@keyframes frameGlow {
  0%, 100% { box-shadow: 0 0 25px rgba(255,217,102,0.3); }
  50% { box-shadow: 0 0 45px rgba(255,217,102,0.6); }
}

/* ===== Эпическое свечение для кнопок ===== */
.btn {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.btn:hover {
  box-shadow: 0 0 20px var(--gold), 0 0 40px var(--gold), 0 6px 20px rgba(255,217,102,0.5);
  transform: translateY(-3px);
}

/* ===== Золотое свечение для карточек ===== */
.news-card,
.member-card,
.event-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.news-card:hover,
.member-card:hover,
.event-card:hover {
  box-shadow: 0 15px 35px rgba(0,0,0,0.6), 0 0 25px rgba(255,217,102,0.4), 0 0 50px rgba(255,217,102,0.1);
  border-color: var(--gold);
}

/* ===== Свечение для ссылок в футере ===== */
footer a:hover,
footer .btn:hover {
  box-shadow: 0 0 15px var(--gold);
  background: rgba(255,217,102,0.1);
}

/* ===== Анимация появления снизу (уже была, но усиливаем) ===== */
.fade-in-up {
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Мерцание тени у заголовков рангов */
.rank-title {
    animation: rankGlow 2s infinite ease-in-out;
}
@keyframes rankGlow {
    0%, 100% { text-shadow: 0 0 15px currentColor; }
    50%      { text-shadow: 0 0 30px currentColor; }
}

/* ===== Усиленная анимация иконок классов ===== */
.member-class img {
    animation: iconPulse 2s infinite ease-in-out, iconGlow 1.5s infinite ease-in-out;
    filter: drop-shadow(0 0 4px var(--gold));
}
@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}
@keyframes iconGlow {
    0%, 100% { filter: drop-shadow(0 0 4px var(--gold)); }
    50%      { filter: drop-shadow(0 0 12px var(--gold)); }
}

/* При наведении на карточку иконка делает быстрое вращение и усиленное свечение */
.member-card:hover .member-class img {
    animation: iconSpin 0.6s ease-in-out, iconGlow 0.6s ease-in-out;
}
@keyframes iconSpin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(15deg) scale(1.2); }
    100% { transform: rotate(0deg) scale(1); }
}

/* ===== Эпические разделители для .page-title (центрированные) ===== */
.page-title {
    text-align: center;
    overflow: hidden;          /* если текст очень длинный, линии не уплывут */
}
.page-title::before,
.page-title::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold));
    margin: 0 15px;
}
.page-title::after {
    background: linear-gradient(90deg, var(--gold), transparent);
}

/* Чтобы линии не отображались, если заголовок пуст */
.page-title:empty::before,
.page-title:empty::after {
    display: none;
}

/* Центрирование сетки состава на странице members.php */






/* ===== Сетка состава – flex с центрированием (ВСЕГДА по центру) ===== */
.members-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
.member-card {
  width: 160px;
  flex-shrink: 0;
}

/* ===== Усиленные кнопки ===== */
.btn {
  transition: all 0.3s ease;
  border: 1px solid rgba(255,217,102,0.3);
}
.btn:hover {
  box-shadow: 0 0 20px var(--gold), 0 0 40px var(--gold), 0 8px 25px rgba(0,0,0,0.5);
  transform: translateY(-3px);
  border-color: var(--gold);
}

/* ===== Стильные таблицы ===== */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(28,30,38,0.75);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
th {
  background: rgba(255,217,102,0.1);
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 16px;
  text-align: left;
  border-bottom: 2px solid var(--gold);
}
td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: var(--text);
}
tr:last-child td {
  border-bottom: none;
}
tr:hover td {
  background: rgba(255,217,102,0.05);
}

/* ===== Карточки фан-базы ===== */
.fanbase-post {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border: 1px solid rgba(255,255,255,0.05);
}
.fanbase-post:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.5), 0 0 25px rgba(255,217,102,0.2);
  border-color: var(--gold);
}

/* ===== Стилизация всех полей ввода и select ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: #2a2c35;
  border: 1px solid #444;
  border-radius: 8px;
  color: #fff;
  padding: 10px 14px;
  font-size: 14px;
  transition: border-color 0.3s, box-shadow 0.3s;
  outline: none;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(255,217,102,0.3);
}

/* ===== Стилизация всех полей ввода и select ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: #2a2c35;
  border: 1px solid #444;
  border-radius: 8px;
  color: #fff;
  padding: 10px 14px;
  font-size: 14px;
  transition: border-color 0.3s, box-shadow 0.3s;
  outline: none;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(255,217,102,0.3);
}

/* ===== Золотой индикатор под пунктами меню ===== */
.nav-desktop a {
  position: relative;
  overflow: hidden;
}
.nav-desktop a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.3s, left 0.3s;
}
.nav-desktop a:hover::after {
  width: 100%;
  left: 0;
}

/* ===== Плавное появление мобильного меню ===== */
.nav-mobile.open {
  transform: translateX(0);
  opacity: 1;
}

/* ===== Пульсация кнопки Наверх ===== */
#backToTop {
  animation: backToTopPulse 2s infinite ease-in-out;
}
@keyframes backToTopPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
  50% { box-shadow: 0 4px 20px var(--gold); }
}

/* Показываем кнопку Наверх при наличии класса .show */
#backToTop.show {
  display: flex !important;
}

/* ===== Плавное появление мобильного меню ===== */
.nav-mobile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10,12,16,0.98);
  z-index: 200;
  flex-direction: column;
  padding: 80px 20px 30px;
  overflow-y: auto;
  display: flex;
  visibility: hidden;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.nav-mobile.open {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

/* === ИСПРАВЛЕНИЕ: оригинальное мобильное меню === */
.nav-mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10,12,16,0.98);
  z-index: 200;
  flex-direction: column;
  padding: 80px 20px 30px;
  overflow-y: auto;
}
.nav-mobile.open {
  display: flex;
}

/* Основной контейнер */
.content {
  max-width: 1300px;
  margin: 20px auto;
  padding: 0 20px;
}
.content-wrap {
  position: relative;
  z-index: 1;
}

/* Плавное появление мобильного меню (добавляем анимацию) */
.nav-mobile {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-mobile.open {
  display: flex !important; /* перестраховка */
}