/* ============================================================
   ALPHA — редизайн-слой (2026-07, итерация «соцсеть»).
   Modern Dark: слоистые поверхности, ambient-свечение, glass.
   Бренд-палитра и шрифты — из styles.css (wine + neon green).
   Загружается ПОСЛЕ styles.css и social.css, только переопределения.
   ============================================================ */

/* ---------- Ambient-фон: медленно дышащие световые пятна ---------- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(107,18,40,.34), transparent 60%),
    radial-gradient(700px 500px at -10% 20%, rgba(42,6,19,.6), transparent 55%),
    radial-gradient(800px 700px at 50% 120%, rgba(143,26,54,.2), transparent 60%),
    radial-gradient(500px 400px at 70% 60%, rgba(182,255,60,.04), transparent 65%);
  animation: ambientDrift 24s ease-in-out infinite alternate;
}
@keyframes ambientDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2%, 1.5%, 0) scale(1.05); }
}
[data-theme="light"] body::before { animation: none; }

/* ---------- Шапка: усиленное стекло + аккуратная высота ---------- */
.site-header {
  background: rgba(12,10,13,.6);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
.site-header.is-scrolled {
  background: rgba(12,10,13,.85);
  box-shadow: 0 8px 32px -16px rgba(0,0,0,.6);
}
[data-theme="light"] .site-header { background: rgba(246,242,244,.7); }
[data-theme="light"] .site-header.is-scrolled { background: rgba(246,242,244,.92); }

/* ---------- Онлайн-пилюля в шапке ---------- */
.online-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
  color: var(--fg-muted);
  transition: border-color var(--t-fast), color var(--t-fast);
  cursor: pointer;
}
.online-pill:hover { border-color: var(--neon-green); color: var(--fg); }
.online-pill[data-server-status="online"] { color: var(--neon-green); border-color: rgba(182,255,60,.35); background: rgba(182,255,60,.06); }
.online-pill[data-server-status="offline"] { color: var(--fg-dim); }

/* Точка статуса: пульс, когда сервер онлайн */
.status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--fg-dim); flex-shrink: 0;
  transition: background var(--t-fast);
}
[data-server-status="online"] .status-dot {
  background: var(--neon-green);
  box-shadow: 0 0 0 0 rgba(182,255,60,.5);
  animation: statusPulse 2.2s ease-out infinite;
}
[data-server-status="offline"] .status-dot { background: var(--neon-pink); animation: none; }
[data-server-status="loading"] .status-dot { animation: statusBlink 1s ease-in-out infinite alternate; }
@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(182,255,60,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(182,255,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(182,255,60,0); }
}
@keyframes statusBlink { from { opacity: .35; } to { opacity: 1; } }

/* ---------- Карточки: слоистая поверхность + внутренняя подсветка ---------- */
.card, .profile-card, .auth-card, .player-card, .player-hero,
.chat-sidebar, .chat-main {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.015) 100%),
    rgba(20,15,19,.55);
  border: 1px solid rgba(244,238,240,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 40px -24px rgba(0,0,0,.7);
}
[data-theme="light"] .card, [data-theme="light"] .profile-card, [data-theme="light"] .auth-card,
[data-theme="light"] .player-card, [data-theme="light"] .player-hero,
[data-theme="light"] .chat-sidebar, [data-theme="light"] .chat-main {
  background: rgba(255,255,255,.72);
  border-color: var(--border);
  box-shadow: 0 12px 32px -22px rgba(107,18,40,.25);
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-wine);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 1px var(--border-wine),
    0 22px 60px -24px var(--wine-glow);
}

/* ---------- Кнопки: тактильный отклик + свечение primary ---------- */
.btn { cursor: pointer; }
.btn:active { transform: translateY(0) scale(.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--wine-bright) 0%, #a92046 100%);
  box-shadow: 0 10px 30px -12px var(--wine-glow), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-neon { box-shadow: 0 8px 26px -14px rgba(182,255,60,.55), inset 0 1px 0 rgba(255,255,255,.35); }

/* Светлый hero: убираем винную дымку тёмной темы — только лёгкий градиент. */
[data-theme="light"] .hero {
  background:
    linear-gradient(180deg, rgba(143,26,54,.06) 0%, transparent 60%),
    radial-gradient(600px 400px at 20% 30%, rgba(143,26,54,.04), transparent 60%);
}

/* ---------- Hero: приподнятая IP-плитка со стеклом ---------- */
.ip-strip {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 100%),
    rgba(20,15,19,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(244,238,240,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 48px -28px rgba(0,0,0,.8);
}
[data-theme="light"] .ip-strip { background: rgba(255,255,255,.8); }

/* ---------- Статистика сообщества на главной ---------- */
.community-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 28px;
}
.community-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 100%), rgba(20,15,19,.5);
  text-decoration: none; color: var(--fg);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.community-stat:hover { border-color: var(--neon-green); transform: translateY(-2px); }
.community-stat strong {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--neon-green); font-variant-numeric: tabular-nums;
}
.community-stat span { color: var(--fg-dim); font-size: .82rem; }
[data-theme="light"] .community-stat { background: rgba(255,255,255,.7); }
@media (max-width: 560px) { .community-stats { grid-template-columns: 1fr; } }

/* ---------- Лента: посты как в соцсети ---------- */
.feed-post { padding: 24px 26px; }
.feed-post-head img { border: 1px solid var(--border-wine); }
.feed-post + .feed-post { margin-top: 0; }

/* ---------- Бейдж уведомлений: мягкий пульс при наличии ---------- */
.notif-badge { animation: statusBlink 1.4s ease-in-out infinite alternate; }

/* ---------- Единый скроллбар (в светлой теме — нейтральный) ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(143,26,54,.6) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(143,26,54,.55); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }
[data-theme="light"] * { scrollbar-color: rgba(34,26,29,.25) transparent; }
[data-theme="light"] *::-webkit-scrollbar-thumb { background: rgba(34,26,29,.22); }

/* ============================================================
   МАКЕТ С ЛЕВЫМ САЙДБАРОМ (2026-07)
   Десктоп ≥1024px: постоянная панель слева, сворачивается до иконок
   (html.sidebar-collapsed, состояние в localStorage).
   Мобильный: панель — выезжающий drawer, открывается бургером в топбаре.
   ============================================================ */

.app-shell { display: flex; min-height: 100dvh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-main main { flex: 1; position: relative; }

/* --- Сайдбар --- */
.sidebar {
  display: flex; flex-direction: column;
  width: 264px; flex-shrink: 0;
  position: sticky; top: 0; height: 100dvh;
  padding: 14px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, transparent 40%),
    rgba(14,11,14,.72);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-right: 1px solid var(--border);
  z-index: 120;
  transition: width var(--t), transform var(--t);
  overflow-y: auto; overflow-x: hidden;
}
[data-theme="light"] .sidebar { background: rgba(255,255,255,.8); }

.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 14px; }
.sidebar-head .brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.sidebar-head .brand-name { font-family: var(--font-pixel); font-size: .72rem; letter-spacing: .04em; }

.sidebar-collapse {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--fg-muted); cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t);
}
.sidebar-collapse:hover { color: var(--neon-green); border-color: var(--neon-green); }
.sidebar-collapse svg { transition: transform var(--t); }
html.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }

.sidebar-nav { flex: 1; }
.sidebar-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sidebar-link {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--fg-muted); font-weight: 500; font-size: .95rem;
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.sidebar-link:hover { color: var(--fg); background: rgba(255,255,255,.05); }
[data-theme="light"] .sidebar-link:hover { background: rgba(34,26,29,.05); }
.sidebar-link.is-active {
  color: var(--neon-green);
  background: rgba(182,255,60,.08);
}
.sidebar-link.is-active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--neon-green);
}
[data-theme="light"] .sidebar-link.is-active { background: rgba(63,125,0,.09); }
.sidebar-icon { display: inline-flex; flex-shrink: 0; }
.sidebar-nav-badge { position: static; margin-left: auto; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 4px 4px; border-top: 1px solid var(--border); }
.sidebar-foot .online-pill { width: 100%; justify-content: flex-start; }
.sidebar-foot-row { display: flex; gap: 8px; }

/* --- Свёрнутый сайдбар (только десктоп) --- */
@media (min-width: 1024px) {
  html.sidebar-collapsed .sidebar { width: 78px; padding-inline: 10px; }
  html.sidebar-collapsed .sidebar-label { display: none; }
  html.sidebar-collapsed .sidebar-head { flex-direction: column; }
  html.sidebar-collapsed .sidebar-link { justify-content: center; padding-inline: 0; }
  html.sidebar-collapsed .sidebar-nav-badge { position: absolute; top: 4px; right: 4px; margin: 0; }
  html.sidebar-collapsed .sidebar-foot .online-pill { justify-content: center; padding-inline: 0; }
  html.sidebar-collapsed .sidebar-foot-row { flex-direction: column; align-items: center; }
}

/* --- Топбар (только мобильный) --- */
.topbar {
  display: none;
  position: sticky; top: 0; z-index: 100;
  align-items: center; gap: 14px;
  height: 60px; padding: 0 16px;
  background: rgba(12,10,13,.72);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .topbar { background: rgba(247,245,243,.85); }
.topbar .brand { display: inline-flex; align-items: center; gap: 8px; }
.topbar .brand-name { font-family: var(--font-pixel); font-size: .66rem; }
.topbar .topbar-actions { margin-left: auto; display: flex; gap: 8px; }

@media (max-width: 1023.98px) {
  .topbar { display: flex; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: min(300px, 84vw); height: 100dvh;
    transform: translateX(-105%);
    box-shadow: 24px 0 60px -30px rgba(0,0,0,.8);
  }
  .sidebar.is-open { transform: translateX(0); }
  /* Свёрнутость на мобильном не применяется — drawer всегда полный. */
  html.sidebar-collapsed .sidebar { width: min(300px, 84vw); }
  .sidebar-collapse { display: none; }
  .sidebar-scrim {
    position: fixed; inset: 0; z-index: 115;
    background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t);
  }
  .sidebar.is-open ~ .sidebar-scrim { opacity: 1; pointer-events: auto; }
}
@media (min-width: 1024px) {
  .sidebar-scrim { display: none; }
}

/* --- Эмблема страницы: иконка-образ раздела в углу контента --- */
.page-emblem {
  position: absolute; top: 28px; right: 28px;
  color: var(--wine-bright);
  opacity: .12;
  pointer-events: none; user-select: none;
  transform: rotate(-8deg);
}
[data-theme="light"] .page-emblem { opacity: .08; }
@media (max-width: 760px) {
  .page-emblem { top: 12px; right: -30px; opacity: .07; }
  .page-emblem svg { width: 150px; height: 150px; }
}

/* ---------- Доступность: движение по запросу пользователя ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .status-dot, .notif-badge { animation: none !important; }
  .card:hover, .community-stat:hover, .player-card:hover, .btn:hover { transform: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}