/* ==========================================================================
   Карусель вкладок рядом с заголовком главной + кликабельные плитки статистики.
   Файл самостоятельный: можно отключить, убрав <link> и <script src="home-nav.js">.
   ========================================================================== */

/* ---------- карусель ---------- */
.ff-carousel { --stepY: 64px; --stepX: 128px; position: relative; width: 100%; height: 86px; margin-top: 18px; user-select: none; -webkit-tap-highlight-color: transparent; }
.cv-item {
    --c1: #7a2cff; --c2: #ff4fd8; --o: 0; --ao: 0;
    position: absolute; left: 50%; top: 0; width: 150px; height: 74px; margin-left: -75px;
    display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 16px; cursor: pointer; text-align: left; color: #fff; overflow: hidden; isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .22); font: 800 14px 'Inter', sans-serif; letter-spacing: .2px;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 22px color-mix(in srgb, var(--c1) 55%, transparent);
    transform: translateX(calc(var(--o) * var(--stepX))) scale(calc(1 - var(--ao) * .1));
    opacity: calc(1 - var(--ao) * .34); z-index: calc(10 - var(--ao));
    transition: transform .75s cubic-bezier(.22, .9, .3, 1), opacity .75s ease, box-shadow .3s, filter .3s;
}
.cv-item[data-far] { opacity: 0; pointer-events: none; }
.cv-item::before {                                   /* фон вкладки: узор + блик */
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: .9;
    background: radial-gradient(120px 80px at 90% 10%, rgba(255, 255, 255, .35), transparent 70%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 12px);
}
.cv-item::after {                                    /* бегущий блик по активной карточке */
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; opacity: 0; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
}
.cv-item.cv-on { border-color: rgba(255, 255, 255, .7); box-shadow: 0 14px 36px rgba(0, 0, 0, .55), 0 0 34px color-mix(in srgb, var(--c2) 70%, transparent); }
.cv-item.cv-on::after { opacity: 1; animation: cvShine 2.6s ease-in-out infinite; }
@keyframes cvShine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
.cv-item:hover { filter: brightness(1.15); }
.cv-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cv-ico { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .25); }
.cv-ico svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cv-txt { min-width: 0; line-height: 1.15; text-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.cv-txt i { display: block; margin-top: 3px; font: 600 10px 'Inter', sans-serif; letter-spacing: 1px; text-transform: uppercase; opacity: .8; font-style: normal; }
.cv-hint { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font: 700 10px 'Inter', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(230, 214, 255, .6); pointer-events: none; }

/* ПК: вертикальное колесо справа от заголовка */
@media (min-width: 901px) {
    .ff-carousel { position: absolute; right: clamp(18px, 2.6vw, 44px); top: 50%; width: min(34%, 320px); height: 320px; margin: 0; transform: translateY(-50%); z-index: 3; }
    .cv-item { left: 0; right: 0; top: 50%; width: auto; height: 62px; margin: -31px 0 0; transform: translateY(calc(var(--o) * var(--stepY))) scale(calc(1 - var(--ao) * .08)); }
    .cv-hint { display: none; }
}
@media (max-width: 900px) {
    .ff-carousel { height: 96px; }
}
@media (max-width: 420px) {
    .ff-carousel { --stepX: 112px; }
    .cv-item { width: 134px; margin-left: -67px; padding: 0 10px; gap: 9px; font-size: 13px; }
}

/* ---------- кликабельные плитки статистики ---------- */
.stat-card[data-page] { cursor: pointer; }
.stat-card[data-page]:focus-visible { outline: 2px solid #b78cff; outline-offset: 2px; }
.stat-card[data-page]::after { content: '›'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 700 24px 'Inter', sans-serif; color: rgba(255, 255, 255, .35); transition: transform .25s, color .25s; }
.stat-card[data-page]:hover::after { color: #fff; transform: translate(4px, -50%); }

/* «Действующий ТОП-1 СНГ» виден только на главной, «За всё время» и «За месяц»; на остальных вкладках скрыт */
body[data-cur]:not([data-cur="home"]):not([data-cur="alltime"]):not([data-cur="month"]) .hall-of-fame { display: none !important; }

/* ручное управление каруселью: стрелки и «хватающий» курсор */
.ff-carousel { cursor: grab; }
.ff-carousel.cv-drag { cursor: grabbing; }
.ff-carousel.cv-drag .cv-item { transition-duration: .3s, .3s, .3s, .3s; }
.cv-nav { position: absolute; z-index: 20; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: #fff; font: 900 22px/1 'Inter', sans-serif;
    border: 1px solid rgba(255, 255, 255, .35); background: rgba(10, 6, 24, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s, transform .2s; }
.cv-nav:hover { background: rgba(var(--ff-a, 122, 44, 255), .75); }
.cv-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (min-width: 901px) {
    .cv-nav.prev { left: 50%; top: 2px; margin-left: -17px; transform: rotate(90deg); }
    .cv-nav.next { left: 50%; bottom: 2px; margin-left: -17px; transform: rotate(90deg); }
}
@media (max-width: 900px) {
    .cv-nav.prev { left: 2px; top: 50%; margin-top: -17px; }
    .cv-nav.next { right: 2px; top: 50%; margin-top: -17px; }
}