/* ==========================================
   СТРАНИЦА СООБЩЕСТВА
   Базовые токены и шапка сайта берутся из style.css
   ========================================== */

.community-page {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Текущий раздел в верхнем меню */
.header-center a.is-current {
    font-weight: 700;
}

.community-section {
    position: relative;
    width: 100%;
    padding: 70px 60px;
    box-sizing: border-box;
}

/* ==========================================
   ШАПКА СООБЩЕСТВА
   ========================================== */
.community-hero {
    position: relative;
    margin-top: 70px;
    padding: 60px 60px 70px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

/* --- Разлетевшиеся карточки на фоне --- */
.hero-cards {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.hero-card {
    position: absolute;
    width: 150px;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    /* Без рамки: чёткая 1px-граница на размытом элементе читается
       как посторонняя светлая полоса поверх чёрного фона. */
    /* Фон намеренно приглушён: карточки — декор, а не контент.
       Без сильного гашения яркие арты читаются цветными пятнами и спорят с именем. */
    opacity: 0.22;
    filter: blur(2px) brightness(0.35) saturate(0.25);
}

    .hero-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Мягко гасим декор к краям, чтобы он не спорил с текстом */
.hero-cards::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 35%, #000000 78%);
}

/* --- Верхний ряд: статистика | персонаж | кнопка --- */
.hero-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1500px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 40px;
}

.hero-side {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.hero-side-right {
    align-items: flex-end;
}

/* Место сообщества в топе сайта */
.hero-rank {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.hero-rank-num {
    font-size: 54px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
}

.hero-rank-label {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: lowercase;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-stat-value {
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}

.hero-stat-value-sm {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.hero-stat-label {
    font-size: 13px;
    color: var(--text-muted);
}

.hero-stat-created {
    gap: 4px;
}

/* --- Персонаж (PNG вставляет пользователь) --- */
.hero-character-slot {
    position: relative;
    width: clamp(260px, 26vw, 420px);
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Свечение-подсветка за персонажем: отделяет силуэт от чёрного фона.
   Лежит под самим PNG (z-index 0 против 1) и не перехватывает мышь. */
.hero-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 190%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle, rgba(192, 38, 211, 0.30) 0%, rgba(192, 38, 211, 0.12) 32%, transparent 62%),
        radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, transparent 45%);
    filter: blur(22px);
    animation: heroGlowPulse 6s ease-in-out infinite alternate;
}

@keyframes heroGlowPulse {
    from {
        opacity: 0.75;
        transform: translate(-50%, -50%) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.04);
    }
}

.hero-character {
    position: relative;
    z-index: 1; /* поверх .hero-glow */
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: none; /* показывается из JS, когда путь задан и картинка загрузилась */
}

    .hero-character.is-loaded {
        display: block;
    }

/* Пунктирная рамка-подсказка, пока PNG не подставлен */
.hero-character-placeholder {
    position: absolute;
    inset: 0;
    z-index: 1; /* поверх .hero-glow */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

    .hero-character-placeholder.is-hidden {
        display: none;
    }

    .hero-character-placeholder i {
        font-size: 34px;
        opacity: 0.7;
    }

    .hero-character-placeholder span {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-main);
    }

    .hero-character-placeholder small {
        font-size: 10px;
        opacity: 0.75;
        line-height: 1.5;
    }

/* --- Имя сообщества --- */
.hero-title-block {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Тег и имя заходят на персонажа, как в референсе */
    margin-top: -28px;
}

.hero-tag {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--text-main);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
    margin-bottom: -6px;
}

.hero-name {
    margin: 0;
    font-size: clamp(48px, 7vw, 104px);
    font-weight: 900;
    letter-spacing: 4px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.9);
}

.hero-divider {
    display: block;
    width: min(560px, 70%);
    height: 1px;
    margin: 26px 0 22px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
}

.hero-socials {
    display: flex;
    align-items: center;
    gap: 22px;
}

    .hero-socials a {
        color: var(--text-main);
        font-size: 20px;
        text-decoration: none;
        opacity: 0.85;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .hero-socials a:hover {
        opacity: 1;
        transform: translateY(-2px);
    }

/* ==========================================
   ВИДЕО
   ========================================== */
.video-layout {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
    max-width: 1500px;
    margin: 0 auto;
}

.video-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.video-side-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

    .video-side-item img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        transition: border-color 0.25s ease;
    }

    .video-side-item:hover img {
        border-color: rgba(255, 255, 255, 0.45);
    }

.video-side-caption {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4;
}

.video-main-thumb {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    aspect-ratio: 16 / 9;
}

    .video-main-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.video-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 4px;
}

.video-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.video-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.video-tags {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--text-muted);
}

    .video-tags span {
        color: #7aa2ff;
    }

.video-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    max-width: 1500px;
    margin: 26px auto 0;
}

.video-strip-item {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    cursor: pointer;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

    .video-strip-item:hover {
        border-color: rgba(255, 255, 255, 0.45);
        transform: translateY(-3px);
    }

    .video-strip-item img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
    }

/* ==========================================
   КИОСК (3D)
   ========================================== */
.community-kiosk {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.kiosk-sign {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 18px 46px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
}

.kiosk-sign-logo {
    font-size: 26px;
}

.kiosk-sign-text {
    font-size: clamp(24px, 3vw, 42px);
    font-weight: 700;
    letter-spacing: 6px;
}

/* Холст Three.js: события мыши отключены — модель статична и не перетаскивается */
.kiosk-stage {
    position: relative;
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .kiosk-stage canvas {
        width: 100% !important;
        height: 100% !important;
        display: block;
        outline: none;
        pointer-events: none; /* мышь полностью игнорируется холстом */
    }

.kiosk-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
    text-align: center;
}

    .kiosk-fallback.is-hidden {
        display: none;
    }

    .kiosk-fallback i {
        font-size: 40px;
        opacity: 0.6;
    }

    .kiosk-fallback span {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-main);
    }

    .kiosk-fallback small {
        font-size: 10px;
        opacity: 0.75;
    }

/* ==========================================
   ЛЕНТА СООБЩЕСТВА
   ========================================== */
.community-feed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1500px;
    margin: 0 auto;
}

.community-post {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.25s ease;
}

    .community-post:hover {
        border-color: rgba(255, 255, 255, 0.4);
    }

.community-post-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 12px;
}

    .community-post-header b {
        font-weight: 700;
    }

    .community-post-header .community-post-sub {
        color: var(--text-muted);
        font-weight: 400;
    }

.community-post-menu {
    margin-left: auto;
    color: var(--text-muted);
    cursor: pointer;
}

.community-post-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

    .community-post-media img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        display: block;
    }

.community-post-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
}

.community-post-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

    .community-post-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.community-post-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.community-post-author {
    font-size: 12px;
    font-weight: 700;
}

.community-post-caption {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

.community-post-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px 12px;
    font-size: 11px;
    color: var(--text-muted);
}

    .community-post-stats span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

.community-post-views {
    margin-left: auto;
}

/* ==========================================
   АДАПТИВ
   ========================================== */
@media (max-width: 1200px) {
    .video-layout {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .video-info {
        grid-column: 1 / -1;
    }

    .video-strip {
        grid-template-columns: repeat(3, 1fr);
    }

    .community-feed-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .community-hero,
    .community-section {
        padding-left: 24px;
        padding-right: 24px;
    }

    .hero-stage {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 26px;
    }

    .hero-side,
    .hero-side-right {
        align-items: center;
    }

    .hero-side {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 26px;
    }

    .hero-title-block {
        margin-top: 10px;
    }

    .video-layout {
        grid-template-columns: 1fr;
    }

    .video-side {
        flex-direction: row;
        overflow-x: auto;
    }

    .video-side-item {
        min-width: 130px;
    }

    .video-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .community-feed-grid {
        grid-template-columns: 1fr;
    }
}