/* ============================================================
   /community — галерея всех работ сообщества (верхний навбар)
   ============================================================ */
.page-community { overflow-x: hidden; background: #131517; }
body.page-community { display: block; overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100vh; background: #131517; }
html:has(body.page-community) { height: auto; overflow-y: auto; background: #131517; }
/* рейл показываем — единый навбар как на остальных страницах (было display:none) */
.page-community .rail { }

.cmty-main { max-width: 1320px; margin: 0 auto; padding: 96px 24px 80px; }
@media (min-width: 821px){ .cmty-main { padding-left: calc(var(--rail-w, 86px) + 32px); } }
@media (max-width: 820px){ .cmty-main { padding: 78px 5px 90px; } }

/* хедер */
.cmty-hero { text-align: center; padding: 24px 0 36px; }
.cmty-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lime, #E4F482); margin-bottom: 14px; font-family: var(--font-display); }
.cmty-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5vw, 56px); line-height: 1; margin: 0 0 14px; color: var(--text); }
.cmty-hero p { color: var(--text-2); font-size: clamp(14px, 1.6vw, 17px); max-width: 520px; margin: 0 auto; }

/* фильтры */
.cmty-filters { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.cmty-chip { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); font-weight: 600; font-size: 13.5px; cursor: pointer; font-family: inherit; transition: all .15s; }
.cmty-chip:hover { color: var(--text); border-color: var(--text-3); }
.cmty-chip.active { background: var(--lime, #E4F482); color: #1a1f05; border-color: var(--lime, #E4F482); }

/* masonry */
.cmty-masonry { column-count: 4; column-gap: 14px; }
@media (max-width: 1200px){ .cmty-masonry { column-count: 3; } }
@media (max-width: 760px){ .cmty-masonry { column-count: 2; column-gap: 8px; } }
.cmty-masonry .tile { break-inside: avoid; margin-bottom: 14px; border-radius: 16px; overflow: hidden; position: relative; border: 1px solid var(--line); cursor: pointer; display: block; }
@media (max-width: 760px){ .cmty-masonry .tile { margin-bottom: 8px; } }
.cmty-masonry .tile-img { width: 100%; display: block; height: auto; }
.cmty-masonry .tile-img.tile-loading { min-height: 180px; background: var(--surface-2); background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%); background-size: 200% 100%; animation: tileShimmer 1.3s ease-in-out infinite; }
.cmty-masonry .tile-img:not(.tile-loading) { animation: tileFadeIn .45s ease; }
.cmty-masonry .tile-hover { position: absolute; inset: 0; opacity: 0; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 45%); display: flex; align-items: flex-end; padding: 12px; transition: opacity .2s; }
.cmty-masonry .tile:hover .tile-hover { opacity: 1; }
.cmty-masonry .tile-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.cmty-masonry .tile-author { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #fff; }
.cmty-masonry .tile-author .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime, #E4F482); }
.cmty-masonry .tile-likes { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: #fff; }

.cmty-empty { text-align: center; color: var(--text-3); padding: 60px 0; font-size: 15px; }
.cmty-more-wrap { display: flex; justify-content: center; margin-top: 28px; }
.cmty-more { padding: 13px 30px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; }
.cmty-more:hover { background: var(--surface-3); }

/* Анимированный фон — как на /character */
.cmty-bganim { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(120deg, #0a0812, #0d0a18, #0a0d18, #0c0a14);
  background-size: 300% 300%; animation: cmtyBgShift 24s ease-in-out infinite; }
.cmty-bganim::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(700px 520px at 20% 25%, rgba(124,92,255,.30), transparent 60%),
    radial-gradient(650px 500px at 80% 70%, rgba(228,244,130,.14), transparent 60%),
    radial-gradient(600px 480px at 60% 20%, rgba(80,160,255,.18), transparent 60%);
  animation: cmtyBgFloat 28s ease-in-out infinite alternate;
}
.cmty-bganim::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,7,12,.45), rgba(8,7,12,.82));
}
@keyframes cmtyBgShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes cmtyBgFloat {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.08); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .cmty-bganim, .cmty-bganim::before { animation: none; } }
/* контент над фоном */
.page-community main, .page-community .cmty-hero, .page-community .htp-topnav { position: relative; z-index: 1; }