/* ════════════════════════════════════════════════════════════════
   ЗАЛ СЛАВЫ — эпичный экран рейтинга.
   Концепт: тёмный «военный мемориал» с прожекторами. Топ-3 стоят на
   металлических пьедесталах (золото/серебро/бронза) со своими реальными
   танками; остальные — в чистом рейтинговом списке командиров. Палитра
   игры: тёмный олив + золото + цвет звания (getRank().color, inline).
   Все .hof-* классы новые — старые .glb-* остаются дремать (не мешают).
   ════════════════════════════════════════════════════════════════ */

:root {
    --hof-gold: #e8d480;
    --hof-gold-bright: #ffe890;
    --hof-gold-deep: #c89c2a;
    --hof-silver: #cdd6dc;
    --hof-bronze: #d08a4e;
    --hof-ink: #d8d0b4;
    --hof-ink-dim: #8a9a6a;
    --hof-line: rgba(150, 180, 100, 0.16);
    --hof-stencil: 'Black Ops One', Impact, sans-serif;
}

/* Зал славы — полноэкранный «захват»: своя шапка (← МЕНЮ + заголовок),
   глобальный топбар прячем, иначе он перекрывает заголовок ЗАЛ СЛАВЫ. */
body.screen-globalLeaderboardScreen #globalTopbar { display: none !important; }

#globalLeaderboardScreen.hof-screen {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background:
        radial-gradient(ellipse 60% 50% at 50% -8%, rgba(232, 212, 128, 0.10), transparent 70%),
        radial-gradient(ellipse 90% 70% at 50% 120%, rgba(0, 0, 0, 0.6), transparent 60%),
        linear-gradient(180deg, #0c1207 0%, #080c05 55%, #040602 100%);
    background-attachment: fixed;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    user-select: none;
    -webkit-user-select: none;
}

/* Лучи прожекторов сверху — два мягких конуса, чуть мерцают */
.hof-rays {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    /* Статичные конусы прожекторов. Анимацию убрали — конический градиент
       перерисовывался каждый кадр и подлагивал на слабых машинах. */
    background:
        conic-gradient(from 200deg at 30% -10%, transparent 0deg, rgba(232, 212, 128, 0.05) 18deg, transparent 36deg),
        conic-gradient(from 130deg at 70% -10%, transparent 0deg, rgba(140, 180, 80, 0.045) 16deg, transparent 32deg);
    opacity: 0.9;
}
.hof-vignette {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    box-shadow: inset 0 0 220px rgba(0, 0, 0, 0.7);
}

/* ── Шапка ── */
.hof-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 16px 30px 18px;
    gap: 18px;
    background: linear-gradient(180deg, rgba(10, 16, 7, 0.96) 0%, rgba(8, 12, 6, 0.78) 80%, transparent 100%);
    flex-shrink: 0;
}
.hof-back {
    justify-self: start;
    background: transparent;
    border: 1px solid var(--hof-line);
    color: var(--hof-ink-dim);
    border-radius: 7px;
    padding: 9px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.hof-back:hover { border-color: rgba(170, 200, 110, 0.4); color: #ece4c8; background: rgba(150, 180, 100, 0.07); }
.hof-back-arrow { display: inline-block; transition: transform 0.15s; }
.hof-back:hover .hof-back-arrow { transform: translateX(-3px); }

.hof-title-wrap { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hof-eyebrow { font-size: 10px; color: var(--hof-ink-dim); letter-spacing: 5px; font-weight: 700; }
.hof-title {
    font-family: var(--hof-stencil);
    font-size: 38px;
    letter-spacing: 12px;
    margin: 0;
    line-height: 1;
    background: linear-gradient(180deg, var(--hof-gold-bright) 0%, var(--hof-gold) 42%, var(--hof-gold-deep) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 38px rgba(232, 212, 128, 0.28);
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55));
}
.hof-title-rule {
    width: 220px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--hof-gold-deep), var(--hof-gold-bright), var(--hof-gold-deep), transparent);
    opacity: 0.7;
}
.hof-meta { justify-self: end; display: flex; align-items: center; gap: 16px; }
.hof-meta-stat { text-align: right; line-height: 1; }
.hof-meta-num { display: block; font-family: var(--hof-stencil); font-size: 24px; color: var(--hof-gold); letter-spacing: 1px; }
.hof-meta-lbl { display: block; font-size: 9px; color: var(--hof-ink-dim); letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; font-weight: 700; }
.hof-refresh {
    background: transparent; border: 1px solid var(--hof-line); color: var(--hof-ink-dim);
    width: 38px; height: 38px; border-radius: 7px; font-size: 18px; cursor: pointer;
    transition: transform 0.3s, border-color 0.15s, color 0.15s;
}
.hof-refresh:hover { border-color: rgba(170, 200, 110, 0.4); color: #ece4c8; transform: rotate(180deg); }

/* ── Тело ── */
.hof-body {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 26px 60px;
}

/* ════════════════════════════════════════════════════════════════
   ПЬЕДЕСТАЛ (топ-3)
   ════════════════════════════════════════════════════════════════ */
.hof-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 26px;
    padding: 18px 0 14px;
}
.hof-pod {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 268px;
    --tier: var(--hof-gold);
}
/* Порядок на экране: #2 слева, #1 в центре, #3 справа */
.hof-pod-1 { order: 2; width: 320px; }
.hof-pod-2 { order: 1; }
.hof-pod-3 { order: 3; }
.hof-pod-1 { margin-bottom: 0; }
.hof-pod-2, .hof-pod-3 { margin-bottom: 6px; }

/* Подсветка-нимб за призёром */
.hof-pod-spotlight {
    position: absolute;
    top: -6px; left: 50%; transform: translateX(-50%);
    width: 240px; height: 240px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.hof-pod-1 .hof-pod-spotlight { background: radial-gradient(circle, rgba(255, 232, 144, 0.22), transparent 62%); width: 300px; height: 300px; }
.hof-pod-2 .hof-pod-spotlight { background: radial-gradient(circle, rgba(205, 214, 220, 0.14), transparent 62%); }
.hof-pod-3 .hof-pod-spotlight { background: radial-gradient(circle, rgba(208, 138, 78, 0.14), transparent 62%); }

/* Медаль/венок */
.hof-pod-medal {
    position: relative; z-index: 2;
    font-size: 30px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    margin-bottom: 2px;
}
.hof-pod-1 .hof-pod-medal { font-size: 40px; }

/* Танк призёра */
.hof-pod-tank {
    position: relative; z-index: 2;
    width: 100%;
    display: flex; justify-content: center; align-items: flex-end;
}
/* width/height задаются inline (backing-резолюция ×суперсэмплинг для
   чёткости, CSS-размер — отдельно). Здесь только тень/акцент. */
.hof-pod-canvas { display: block; image-rendering: auto; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.6)); }
.hof-pod-1 .hof-pod-canvas { filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 26px rgba(255, 232, 144, 0.18)); }

.hof-pod-name {
    position: relative; z-index: 2;
    font-family: var(--hof-stencil);
    font-size: 20px;
    letter-spacing: 1px;
    color: #f0e9cc;
    margin-top: 2px;
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.hof-pod-1 .hof-pod-name { font-size: 25px; color: var(--hof-gold-bright); text-shadow: 0 0 18px rgba(255, 232, 144, 0.35); }
.hof-pod-tier {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 7px;
    margin-top: 5px; margin-bottom: 12px;
    font-size: 11px; letter-spacing: 2px; font-weight: 700; text-transform: uppercase;
}
.hof-pod-emblem { display: block; }

/* Стат-полоса призёра */
.hof-pod-stats {
    position: relative; z-index: 2;
    display: flex; gap: 0;
    width: 100%;
    border: 1px solid var(--hof-line);
    border-radius: 8px;
    background: rgba(10, 16, 7, 0.5);
    overflow: hidden;
    margin-bottom: 14px;
}
.hof-pod-stats > div {
    flex: 1;
    text-align: center;
    padding: 9px 4px;
    border-left: 1px solid var(--hof-line);
}
.hof-pod-stats > div:first-child { border-left: none; }
.hof-pod-stats b { display: block; font-family: var(--hof-stencil); font-size: 17px; color: var(--hof-ink); letter-spacing: 0.5px; }
.hof-pod-stats span { display: block; font-size: 8px; color: var(--hof-ink-dim); letter-spacing: 1.5px; margin-top: 3px; font-weight: 700; }
.hof-pod-1 .hof-pod-stats b { color: var(--hof-gold); }

/* Пьедестал-блок (металлическая призма с цифрой) */
/* Металлическая призма: яркая верхняя кромка, боковые тени (объём блока),
   глянцевый диагональный блик и гравированная цифра с глубиной. */
.hof-pedestal {
    position: relative; z-index: 1;
    width: 212px;
    border-radius: 7px 7px 2px 2px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow:
        inset 0 3px 0 rgba(255, 255, 255, 0.5),     /* блик верхней грани */
        inset 0 -14px 22px rgba(0, 0, 0, 0.5),       /* затемнение к низу */
        inset 9px 0 16px rgba(0, 0, 0, 0.2),         /* боковой объём */
        inset -9px 0 16px rgba(0, 0, 0, 0.2),
        0 16px 30px rgba(0, 0, 0, 0.55);             /* падающая тень */
    border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.hof-pedestal-sheen {
    position: absolute; top: 0; left: -35%;
    width: 42%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-16deg);
    pointer-events: none;
}
.hof-pedestal-num {
    position: relative; z-index: 2;
    font-family: var(--hof-stencil);
    line-height: 1;
    text-shadow:
        0 3px 5px rgba(0, 0, 0, 0.55),
        0 -1px 0 rgba(255, 255, 255, 0.5),
        0 2px 0 rgba(0, 0, 0, 0.35);
}
.hof-pod-1 .hof-pedestal {
    height: 150px; width: 232px;
    background: linear-gradient(180deg, #fff0a8 0%, #eac24a 18%, #c0931f 50%, #80600f 82%, #4e3a06 100%);
}
.hof-pod-1 .hof-pedestal-num { font-size: 86px; color: #fff6d2; }
.hof-pod-2 .hof-pedestal {
    height: 110px;
    background: linear-gradient(180deg, #f4f8fa 0%, #cdd7dd 18%, #8b969e 50%, #5e686f 82%, #3a4248 100%);
}
.hof-pod-2 .hof-pedestal-num { font-size: 64px; color: #fbfdff; }
.hof-pod-3 .hof-pedestal {
    height: 86px;
    background: linear-gradient(180deg, #f2b482 0%, #db8c4e 18%, #ab6128 50%, #7a4318 82%, #4e2a0f 100%);
}
.hof-pod-3 .hof-pedestal-num { font-size: 52px; color: #ffe2c6; }

/* «Вы» среди призёров */
.hof-pod-me .hof-pod-name::after {
    content: 'ВЫ';
    margin-left: 8px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 9px; letter-spacing: 1px;
    color: #0c1207; background: var(--hof-gold);
    padding: 2px 6px; border-radius: 4px; vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════
   СПИСОК КОМАНДИРОВ (#4+)
   ════════════════════════════════════════════════════════════════ */
.hof-list-wrap {
    margin-top: 8px;
    border-top: 1px solid var(--hof-line);
    padding-top: 22px;
}
.hof-list-title {
    text-align: center;
    margin-bottom: 14px;
}
.hof-list-title span {
    font-family: var(--hof-stencil);
    font-size: 14px; letter-spacing: 6px; color: var(--hof-ink-dim);
    position: relative;
}
.hof-list-title span::before, .hof-list-title span::after {
    content: ''; position: absolute; top: 50%; width: 60px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--hof-line));
}
.hof-list-title span::before { right: 100%; margin-right: 16px; transform: scaleX(-1); }
.hof-list-title span::after { left: 100%; margin-left: 16px; }

/* 12 колонок: ранг · эмблема · командир · звание · уб · см · пом · поб ·
   пор · K/D · KDA · XP. Шапка и строки используют ОДИН template. */
.hof-grid12 { grid-template-columns: 44px 30px minmax(0, 1fr) 128px 52px 52px 52px 50px 52px 48px 50px 80px; }
.hof-list-head {
    display: grid;
    grid-template-columns: 44px 30px minmax(0, 1fr) 128px 52px 52px 52px 50px 52px 48px 50px 80px;
    align-items: center;
    padding: 0 16px 9px;
    border-bottom: 1px solid var(--hof-line);
}
.hof-lh { font-size: 9px; letter-spacing: 1px; color: var(--hof-ink-dim); font-weight: 700; text-transform: uppercase; }
.hof-lh-rank { grid-column: span 2; }
.hof-lh-stat { text-align: right; }
.hof-lh-tier { padding-left: 4px; }

.hof-list { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.hof-row {
    display: grid;
    grid-template-columns: 44px 30px minmax(0, 1fr) 128px 52px 52px 52px 50px 52px 48px 50px 80px;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(235, 226, 180, 0.025);
    transition: background 0.12s, border-color 0.12s;
}
/* Топ-3 в таблице — лёгкий цветной акцент ранга (дубль пьедестала). */
.hof-row-top1 .hof-row-rank { color: var(--hof-gold); }
.hof-row-top2 .hof-row-rank { color: var(--hof-silver); }
.hof-row-top3 .hof-row-rank { color: var(--hof-bronze); }
.hof-row-dim { color: var(--hof-ink-dim); }
.hof-row:hover { background: rgba(150, 180, 100, 0.06); border-color: var(--hof-line); }
.hof-row-rank { font-family: var(--hof-stencil); font-size: 16px; color: var(--hof-ink-dim); letter-spacing: 0.5px; }
.hof-row-emblem { display: block; }
.hof-row-id { min-width: 0; padding-right: 8px; }
.hof-row-name { font-size: 14px; font-weight: 700; color: #e8e0c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hof-row-uid { font-size: 10px; color: var(--hof-ink-dim); letter-spacing: 0.5px; margin-top: 1px; }
.hof-row-tier { font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hof-row-stat { text-align: right; font-size: 12px; color: var(--hof-ink); font-variant-numeric: tabular-nums; }
.hof-row-kd { color: #cfe09a; }
.hof-row-xp { color: var(--hof-gold); font-weight: 700; }
.hof-row-you {
    margin-left: 8px; font-size: 8px; letter-spacing: 1px; color: #0c1207;
    background: var(--hof-gold); padding: 2px 5px; border-radius: 3px; vertical-align: middle;
}

/* Строка «вы» */
.hof-row-me {
    background: rgba(232, 212, 128, 0.07) !important;
    border-color: rgba(232, 212, 128, 0.45) !important;
    box-shadow: 0 0 18px rgba(232, 212, 128, 0.08);
}
.hof-row-me .hof-row-rank { color: var(--hof-gold); }

/* Разделитель «ваше место вне топ-100» */
.hof-divider {
    text-align: center; padding: 14px 0 8px;
    font-size: 11px; letter-spacing: 2px; color: var(--hof-ink-dim); text-transform: uppercase;
}

.hof-empty, .hof-loading { text-align: center; padding: 40px 0; color: var(--hof-ink-dim); letter-spacing: 1px; }
.hof-error { color: #e06a50; }

/* ── Подсказка «ниже ещё рейтинг» ──
   Появляется сразу под пьедесталом, чтобы игрок понял: топ-3 — не всё.
   Анимация — лёгкий transform-bounce шеврона (GPU, без перерисовок). */
.hof-scroll-hint {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    margin: 4px 0 16px;
    color: var(--hof-gold);
    font-size: 10px; letter-spacing: 3px; font-weight: 700;
    text-shadow: 0 0 14px rgba(232, 212, 128, 0.35);
}
.hof-scroll-chev {
    font-size: 24px; line-height: 0.5;
    animation: hofChev 1.5s ease-in-out infinite;
}
@keyframes hofChev { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(5px); opacity: 1; } }

/* Тонкие скроллбары */
#globalLeaderboardScreen.hof-screen::-webkit-scrollbar { width: 8px; }
#globalLeaderboardScreen.hof-screen::-webkit-scrollbar-thumb { background: rgba(150, 180, 100, 0.22); border-radius: 4px; }

/* ── Адаптив: широкие колонки убираем по мере сужения ── */
@media (max-width: 1080px) {
    /* прячем «вторичные» колонки: помощь, поражения, KDA */
    .hof-c-assist, .hof-c-loss, .hof-c-kda { display: none; }
    .hof-list-head, .hof-row { grid-template-columns: 44px 30px minmax(0, 1fr) 124px 52px 52px 50px 50px 78px; }
}
@media (max-width: 820px) {
    .hof-podium { flex-direction: column; align-items: center; min-height: 0; gap: 14px; }
    .hof-pod, .hof-pod-1 { width: 100%; max-width: 360px; order: 0 !important; }
    .hof-pedestal { display: none; }
    /* совсем узко: ранг · командир · уб · поб · XP */
    .hof-c-assist, .hof-c-loss, .hof-c-kda, .hof-lh-tier, .hof-row-tier { display: none; }
    .hof-list-head, .hof-row { grid-template-columns: 38px 24px minmax(0, 1fr) 52px 48px 72px; }
}