@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');
:root {
/* Гибрид «сайт + ангар»: глубокий зелёно-чёрный фон и стеклянные панели из
игрового HUD (hangar.html), фирменный янтарный остаётся главным акцентом,
зелёный/циан из ангара работают вторичными акцентами (успех/интерактив). */
--bg: #0b100d;
--bg-deep: #0a0e0c;
--surface: #151b17;
--surface-2: #1c2420;
--panel: #151b17;
--panel-2: #1c2420;
--border: rgba(255, 255, 255, 0.10);
--border-strong: rgba(255, 255, 255, 0.20);
--line: rgba(255, 255, 255, 0.10);
--line-soft: rgba(255, 255, 255, 0.06);
--text: #eef3ee;
--text-dim: #a9b6ac;
--text-faint: #6d7a71;
--muted: #a9b6ac;
--accent: #ffc94d;
--accent-ink: #1a1200;
--accent2: #ffc94d;
--accent2-ink: #1a1200;
--amber: #ffc94d;
--amber-2: #ffb545;
--green: #8fd13f;
--green-dark: #5c8a26;
--cyan: #49f3d6;
--magenta: #ff3fae;
--telegram: #ffc94d;
--ad: #ffc94d;
/* Минимальное скругление: рамки едва смягчены, без «пилюль» */
--radius: 8px;
--radius-sm: 5px;
--radius-pill: 6px;
--hard-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
--shadow-1: 0 2px 10px rgba(0, 0, 0, 0.25);
--shadow-2: 0 14px 36px rgba(0, 0, 0, 0.4);
--bevel: 12px;
--bevel-sm: 8px;
/* Стеклянная заливка панелей — как карточки в оверлеях ангара */
/* Блик карточек + собственная тёмная подложка: фон страницы теперь картинка,
и без непрозрачного низа сквозь карточки просвечивал оранжевый взрыв. */
--glass: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
linear-gradient(180deg, rgba(19, 25, 21, 0.9), rgba(14, 19, 16, 0.92));
/* Градиент главного акцента — вместо плоской заливки кнопок */
--accent-grad: linear-gradient(135deg, #ffd166 0%, #f2a93b 100%);
/* Текстура прежней «бронепанели» оставлена в токене, но сведена к едва
заметной сетке — стеклянные панели ангара не терпят грубых царапин. */
--texture-panel: url("data:image/svg+xml;utf8,");
--texture-size: 80px 80px;
/* Подсветка премиумной и коллекционной техники — цвета из игры */
--tank-prem: #ffd15c;
--tank-coll: #7fd0ff;
}
/* ---- Премиум и коллекционная техника -------------------------------------
Как в игре: значок класса, уровень и название у премиума жёлтые, у
коллекционной синие. Классы вешает public/tankRarity.js на строку таблицы
или карточку машины; сами правила подсветки живут рядом с разметкой
каждого списка (tank-hud.css, profile.css, top-tanks.css, ...) и ссылаются
только на эти две переменные — палитра и способ тонирования значка
задаются здесь один раз.
Значки классов — картинки, поэтому цвет им даёт SVG-фильтр (сами фильтры
добавляет на страницу tankRarity.js). */
.tank-prem { --tank-rarity: var(--tank-prem); --tank-rarity-tint: url(#tankTintPrem); }
.tank-coll { --tank-rarity: var(--tank-coll); --tank-rarity-tint: url(#tankTintColl); }
* { box-sizing: border-box; }
html { scrollbar-color: #2A2A2A transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2A2A2A; border-radius: var(--radius-sm); }
::-webkit-scrollbar-track { background: transparent; }
/* Базовый цвет держит html: у body он был непрозрачным и полностью перекрывал
body::after с фоновой картинкой (та сидит на z-index: -1). */
html { background: var(--bg); }
body {
margin: 0;
min-height: 100vh;
background: transparent;
color: var(--text);
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
position: relative;
display: flex;
flex-direction: column;
}
/* body — flex-колонка (для прижатого футера); width: 100% нужен, чтобы
блоки с margin: 0 auto (например .layout) не сжимались до min-content */
body > * { flex-shrink: 0; width: 100%; }
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: 0.03;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
body::after {
content: "";
position: fixed;
inset: -20px;
z-index: -1;
pointer-events: none;
/* Затемнение неравномерное: под колонкой контента (.layout, 1180px) фон
глушится сильно, чтобы карточки и текст читались, а к краям экрана
непрозрачность уходит в ноль — там картинка видна почти в полную силу. */
background:
linear-gradient(90deg,
rgba(8, 11, 9, 0) 0,
rgba(8, 11, 9, 0) calc(50% - 1150px),
rgba(8, 11, 9, 0.55) calc(50% - 900px),
rgba(8, 11, 9, 0.95) calc(50% - 620px),
rgba(8, 11, 9, 0.95) calc(50% + 620px),
rgba(8, 11, 9, 0.55) calc(50% + 900px),
rgba(8, 11, 9, 0) calc(50% + 1150px),
rgba(8, 11, 9, 0) 100%),
linear-gradient(180deg, rgba(10, 14, 12, 0.1), rgba(10, 14, 12, 0.2)),
linear-gradient(180deg, rgba(8, 14, 28, 0.05), rgba(8, 14, 28, 0.05)),
url("/backgrounds/site-bg.webp?v=2") center center / cover no-repeat;
filter: blur(6px);
}
/* Заголовки — плотный Inter без сплошного капса: капс остаётся только у
бренда и мелких надписей-«бровей», иначе страница кричит. */
h1, h2, h3 {
font-family: "Inter", sans-serif;
font-weight: 800;
letter-spacing: -0.015em;
}
.brand-name, .site-nav-label {
font-family: "Oswald", "Inter", sans-serif;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
a { color: inherit; }
[hidden] { display: none !important; }
/* Header */
.site-header {
position: sticky;
top: 0;
z-index: 10;
/* Стеклянная шапка в духе топбаров ангара: полупрозрачная, с блюром и
тонкой янтарной линией снизу вместо «аварийной» штриховки. */
background: linear-gradient(180deg, rgba(10, 14, 12, 0.94), rgba(10, 14, 12, 0.82));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
box-shadow: 0 1px 0 rgba(255, 201, 77, 0.25), 0 10px 30px rgba(0, 0, 0, 0.35);
}
.site-header-inner {
max-width: 1180px;
margin: 0 auto;
padding: 14px 24px 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
position: relative;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.brand-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
background: var(--surface-2);
border: 1px solid var(--border-strong);
display: flex;
align-items: center;
justify-content: center;
font-size: 20.7px;
flex-shrink: 0;
}
.brand-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.brand-name {
font-size: 23px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
transform: skew(-6deg);
display: inline-block;
}
/* Метка эфира на логотипе канала: точка загорается, только когда
/api/stream/status вернул live (см. initHeaderLiveMark в script.js).
Вешаем на .brand, а не на аватар, — у того overflow: hidden, он обрезал бы
точку по кругу. */
.brand { position: relative; }
.brand-live-dot {
position: absolute;
left: 28px;
bottom: 1px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #9146ff;
border: 2px solid var(--bg);
box-shadow: 0 0 8px rgba(145, 70, 255, 0.9);
}
/* «В эфире» — ссылка к плееру на главной. Фиолетовый Twitch, чтобы метка не
спорила с янтарным активной вкладки и красным «турнир идёт». */
.header-live {
display: none;
align-items: center;
gap: 7px;
flex: none;
padding: 7px 12px;
border-radius: var(--radius-pill);
background: rgba(145, 70, 255, 0.16);
border: 1px solid rgba(145, 70, 255, 0.35);
font-size: 12.5px;
font-weight: 700;
color: #d5bcff;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.header-live.is-on { display: flex; }
.header-live:hover { background: rgba(145, 70, 255, 0.28); color: #fff; }
/* Метка занимает ~90 px, и с ней шапка на 1180 перестаёт помещаться в одну
строку — кнопка аккаунта уезжает вниз. Пока идёт эфир, соцссылки сжимаются
до иконок (подписи и так дублируют узнаваемые логотипы): освобождается почти
300 px, и строка остаётся одна. Метка стоит перед .social-links в разметке,
поэтому хватает соседского селектора. */
.header-live.is-on ~ .social-links .social-link {
width: 34px;
height: 34px;
padding: 0;
justify-content: center;
}
.header-live.is-on ~ .social-links .social-link span { display: none; }
.header-live.is-on ~ .social-links .social-link svg { width: 16px; height: 16px; }
.header-live::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: #9146ff;
box-shadow: 0 0 8px rgba(145, 70, 255, 0.9);
}
@media (max-width: 640px) {
/* В шапке телефона свободного места нет вообще: бренд, четыре иконки
соцсетей, лупа и «баг» занимают её ровно всю. Пока идёт эфир, соцсети
уступают место метке — все четыре ссылки целиком есть в полосе стримера
внизу главной, а эфир идёт не всегда. */
.header-live {
padding: 6px 10px;
gap: 6px;
font-size: 12px;
}
.header-live.is-on ~ .social-links { display: none; }
}
.social-links {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.social-link {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.04);
border: 1px solid transparent;
text-decoration: none;
font-size: 13.5px;
font-weight: 600;
color: var(--muted);
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.social-link svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--link-color, var(--muted)); }
.social-link:hover {
border-color: var(--link-color, var(--accent));
color: var(--text);
background: rgba(255, 255, 255, 0.07);
transform: translateY(-1px);
}
/* Кнопка аккаунта в шапке — только ПК: на телефоне профиль живёт в нижней
навигации, дубль в шапке прячем по брейкпоинту ниже. */
.player-account-box {
display: flex;
align-items: center;
}
/* Панель «Ещё» (полный список разделов в столбик) — только для телефона:
на десктопе строка вкладок и так вся на виду, и панель дублировала бы её. */
.nav-more-panel { display: none; }
.nav-tanks-hud,
.nav-sheet-scrim { display: none; }
/* Кнопка-гамбургер для мобильного выпадающего меню — на десктопе не нужна,
там вкладки и так помещаются в одну строку. */
.nav-menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
width: 44px;
height: 44px;
flex: none;
padding: 0;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.04);
cursor: pointer;
}
.nav-menu-toggle span {
display: block;
width: 16px;
height: 2px;
border-radius: 1px;
background: var(--text);
transition: transform 0.15s ease, opacity 0.15s ease;
}
.nav-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.hangar-mode-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 38px;
padding: 0 22px;
background: linear-gradient(160deg, #c3f24f, #8fce1f);
border: none;
border-radius: var(--radius-pill);
color: #16240a;
font-weight: 800;
letter-spacing: 0.01em;
font-size: 13.5px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 4px 18px rgba(143, 206, 31, 0.3);
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.hangar-mode-btn::before { content: '▶'; font-size: 10px; }
.hangar-mode-btn:hover {
transform: translateY(-2px);
filter: brightness(1.06);
box-shadow: 0 8px 26px rgba(143, 206, 31, 0.45);
}
.hangar-mode-btn.disabled {
pointer-events: none;
background: linear-gradient(160deg, #7c8f5e, #5f7645);
color: #263015;
box-shadow: none;
}
.hangar-mode-btn .soon-badge {
position: absolute;
top: -10px;
right: -10px;
background: #ff2e2e;
color: #fff;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.04em;
line-height: 1;
padding: 4px 8px;
border-radius: 999px;
text-transform: uppercase;
border: 2px solid #12160a;
box-shadow: 0 2px 8px rgba(255, 46, 46, 0.7);
}
.player-account-link {
display: flex;
align-items: center;
gap: 7px;
padding: 8px 13px;
border-radius: var(--radius-sm);
background: var(--surface);
border: 1px solid var(--border);
text-decoration: none;
font-size: 14.4px;
font-weight: 600;
color: var(--text);
transition: border-color 0.15s ease, background 0.15s ease;
}
.player-account-link:hover {
border-color: var(--accent);
background: var(--surface-2);
}
.player-account-login {
position: relative;
color: var(--accent);
background: transparent;
border-color: var(--accent);
border-radius: 0;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
/* clip-path обрезает рамку заподлицо со срезом угла, не оставляя на нём
линии — дорисовываем сам срез отдельным отрезком под тем же углом. */
.player-account-login::after {
content: '';
position: absolute;
/* offset-родитель для absolute — внутренний (padding) край, который на
1px уже рамки с каждой стороны, поэтому якорь сдвинут на border-width */
left: calc(100% - 9px);
top: -1px;
width: 14.2px;
height: 1px;
background: currentColor;
transform-origin: 0 0;
transform: rotate(45deg);
pointer-events: none;
}
.player-account-login:hover {
color: var(--accent-ink);
background: var(--accent);
}
/* --- бейдж непрочитанных приглашений на "Взвод" в шапке --- */
.page-tab { position: relative; }
.nav-badge-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #e05252;
margin-left: 5px;
vertical-align: middle;
}
/* --- живая точка на "Турниры" в шапке: прямо сейчас идёт турнир --- */
.nav-live-dot {
position: absolute;
top: 3px;
right: 5px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #ff523c;
box-shadow: 0 0 6px rgba(255, 82, 60, 0.8);
animation: navLiveBlink 1.2s ease-in-out infinite;
}
/* --- счётчик новых постов на вкладке "Лента" --- */
.nav-badge-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 15px;
height: 15px;
padding: 0 4px;
margin-left: 5px;
border-radius: 8px;
background: #e05252;
color: #fff;
font-size: 10.5px;
font-weight: 700;
line-height: 1;
vertical-align: middle;
}
.bottom-tab-badge {
position: absolute;
top: -5px;
right: -7px;
min-width: 14px;
height: 14px;
padding: 0 3px;
border-radius: 8px;
background: #e05252;
color: #fff;
font-size: 9.5px;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes navLiveBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* На телефоне шапка из лого + соцссылок в два ряда + кнопки ангара + входа +
вкладок + hero съедала до половины экрана, оставляя мало места под ленту.
Сжимаем: соцссылки в одну прокручиваемую строку, «Режим ангара» (это
всё равно не активная заглушка) прячем, hero сокращаем до заголовка. */
@media (max-width: 640px) {
/* Всё в одну строку: вторым рядом соцссылки съедали высоту, а полезного
в них ровно четыре иконки. */
.site-header-inner { padding: 12px 10px 8px; gap: 8px; flex-wrap: nowrap; }
.brand { min-width: 0; flex-shrink: 1; }
/* Название канала на телефоне снято совсем, остаётся аватар: 375 px шапка
делила между брендом, соцсетями, ангаром и поиском, и первыми сжимались
иконки — из четырёх было видно одну, обрезанную по краю. Надпись стоит
90 px, ровно их и не хватало. Аватар канала узнаётся и без подписи, а
само название написано в вкладки и в подвале. */
.brand-name { display: none; }
.social-links {
flex-wrap: nowrap;
/* Зазор и кнопки на два пикселя уже, чем были: четыре иконки должны
поместиться целиком в оставшиеся от бренда и ангара ~130 px. */
gap: 4px;
padding-bottom: 2px;
overflow-x: auto;
scrollbar-width: none;
}
.social-links::-webkit-scrollbar { display: none; }
.social-link {
flex-shrink: 0;
padding: 0;
width: 28px;
height: 28px;
justify-content: center;
}
.social-link span { display: none; }
.social-link svg { width: 15px; height: 15px; }
/* «Режим ангара» на телефоне снова в шапке: заглушки со «СКОРО» больше нет,
ангар открыт, и прятать живую фичу незачем. Держим её компактной — ниже,
уже и без разрядки, — иначе она вытесняет гамбургер: рядом стоят ещё
название канала и иконки соцсетей. */
.hangar-mode-btn {
flex: none;
margin-left: auto;
height: 30px;
padding: 0 12px;
gap: 5px;
font-size: 11px;
letter-spacing: 0;
box-shadow: 0 2px 10px rgba(143, 206, 31, 0.28);
}
.hangar-mode-btn::before { font-size: 8px; }
/* Место в шапке отдаём по важности: название канала, кнопка ангара, и уже
потом иконки соцсетей. Без этого при четырёх иконках и кнопке первым
сжималось название — до одной буквы с многоточием. Иконки сжимаются
первыми и просто обрезаются по краю: их ряд без подписей всё равно
читается как продолжение, а не как список. */
/* Иконки больше не жертвуют собой первыми: без надписи бренда им хватает
места целиком. overflow оставлен страховкой — если соцсетей заведут
больше четырёх, ряд обрежется по краю, а не выдавит кнопку ангара. */
.site-header-inner > .social-links {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
}
.brand { flex-shrink: 0; }
/* Профиль на телефоне — в нижней навигации, кнопка в шапке лишняя. */
.site-header-inner > .player-account-box { display: none; }
/* На совсем узких экранах (320 px и уже) даже без надписи бренда четыре
иконки не помещаются — влезают две, остальные режутся по краю. Лучше
убрать ряд целиком: соцсети есть в полосе стримера перед подвалом, а
огрызок из двух иконок читается как поломка вёрстки. */
@media (max-width: 360px) {
.site-header-inner > .social-links { display: none; }
}
.nav-menu-toggle { display: flex; margin-left: auto; }
/* На телефоне горизонтальной строки разделов нет вообще: весь список
живёт в выпадающей панели под гамбургером. Свайп вбок по вкладкам
конфликтовал с прокруткой страницы и съедал высоту шапки. */
.page-tabs-row { display: none; }
/* Полный список разделов «в столбик» + аккаунт — только когда открыт
гамбургер: панель раздвигает контент под шапкой, а не наезжает. */
.nav-more-panel {
display: none;
padding: 10px 12px 14px;
border-top: 1px solid var(--line-soft, var(--border));
}
.nav-more-panel.nav-open { display: block; }
.nav-more-panel .page-tabs {
flex-direction: column;
gap: 2px;
overflow-x: visible;
}
.nav-more-panel .page-tab {
/* Живая точка «Турниры» позиционируется абсолютно — без relative она
улетала к правому краю всей панели. */
position: relative;
padding: 12px;
border-radius: var(--radius-sm);
min-height: 44px;
display: flex;
align-items: center;
}
.nav-more-panel .page-tab.active { border-radius: var(--radius-sm); }
.page-hero-inner { padding: 18px 8px 16px; }
.page-hero-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.nav-live-dot { animation: none; }
body.has-bottom-tabs .nav-more-panel.nav-open,
body.has-bottom-tabs .nav-more-panel.nav-open::after,
body.has-bottom-tabs .nav-tanks-hud.nav-open,
.nav-sheet-scrim.nav-open { animation: none; }
}
/* --- промо-карточка "Следи за турниром" в сайдбаре (идущий официальный турнир) --- */
/* .sidebar-widget объявлен ниже по файлу, поэтому селектор тут составной —
иначе его padding:18px перебивает наш и слой с текстом становится уже фона
(картинка растянута по всей рамке через inset:0). */
.sidebar-widget.live-tourn-widget {
position: relative;
display: block;
padding: 0;
min-height: 168px;
margin-bottom: 16px;
border-radius: 14px;
overflow: hidden;
border: none;
background: var(--surface);
text-decoration: none;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.live-tourn-widget:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.live-tourn-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.25s ease;
}
.live-tourn-widget:hover .live-tourn-bg { transform: scale(1.05); }
/* Слайды турниров лежат друг на друге и проявляются по очереди; активный —
единственный кликабельный. Высоту виджету задаёт min-height контейнера. */
.live-tourn-slide {
position: absolute;
inset: 0;
display: block;
text-decoration: none;
opacity: 0;
pointer-events: none;
transition: opacity 0.45s ease;
}
.live-tourn-slide.active { opacity: 1; pointer-events: auto; }
.live-tourn-overlay {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 6px;
padding: 14px;
background: linear-gradient(180deg, rgba(10, 14, 12, 0.1) 0%, rgba(10, 14, 12, 0.55) 55%, rgba(10, 14, 12, 0.92) 100%);
}
.live-tourn-dots {
position: absolute;
right: 12px;
top: 17px;
z-index: 2;
display: flex;
gap: 5px;
}
.live-tourn-dot-btn {
width: 7px;
height: 7px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.live-tourn-dot-btn:hover { background: rgba(255, 255, 255, 0.6); }
.live-tourn-dot-btn.active { background: #fff; transform: scale(1.25); }
.live-tourn-tag {
position: absolute;
top: 12px;
left: 12px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 11px;
border-radius: 999px;
border: 1px solid rgba(255, 82, 60, 0.5);
background: rgba(10, 14, 12, 0.75);
backdrop-filter: blur(4px);
color: #ff7d6b;
font-size: 10.6px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.live-tourn-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #ff523c;
animation: navLiveBlink 1.2s ease-in-out infinite;
}
.live-tourn-title {
color: #fff;
font-size: 15.5px;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.01em;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.live-tourn-sub {
color: rgba(238, 243, 238, 0.75);
font-size: 12px;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
/* --- колокольчик с приглашениями у ника --- */
.account-notif-wrap { position: relative; margin-left: 6px; }
.account-notif-bell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border-radius: var(--radius-sm);
background: var(--surface);
border: 1px solid var(--border);
cursor: pointer;
font-size: 16.1px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.account-notif-bell:hover { border-color: var(--accent); background: var(--accent); }
.account-notif-badge {
position: absolute;
top: -5px;
right: -5px;
min-width: 15px;
height: 15px;
padding: 0 3px;
border-radius: 8px;
background: #e05252;
color: #fff;
font-size: 10.9px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.account-notif-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 240px;
background: var(--surface);
border: 1px solid var(--border-strong);
box-shadow: var(--hard-shadow);
z-index: 50;
}
.account-notif-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 14px;
color: var(--text);
text-decoration: none;
font-size: 14.4px;
font-weight: 600;
border-bottom: 1px solid var(--border);
}
.account-notif-item:last-child { border-bottom: none; }
.account-notif-item:hover { background: var(--surface-2); }
.account-notif-item b { color: var(--accent); }
.page-tabs-row {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
position: relative;
}
.page-tabs {
display: flex;
gap: 2px;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 8px;
}
.page-tabs::-webkit-scrollbar { display: none; }
/* Вкладки-пилюли: активная — мягкая янтарная подложка, а не подчёркивание */
.page-tab {
padding: 7px 14px;
border-radius: var(--radius-pill);
color: var(--muted);
text-decoration: none;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
transition: color 0.15s ease, background 0.15s ease;
}
.page-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.page-tab.active {
color: var(--accent);
background: rgba(255, 201, 77, 0.1);
box-shadow: inset 0 0 0 1px rgba(255, 201, 77, 0.22);
font-weight: 700;
}
/* Заголовок секции — крупная типографика вместо плашки-коробки */
.section-header {
display: flex;
align-items: baseline;
gap: 10px;
margin: 6px 0 20px;
max-width: 100%;
}
.section-header::before {
content: '';
align-self: center;
width: 5px;
height: 22px;
border-radius: 3px;
background: var(--accent-grad);
box-shadow: 0 0 14px rgba(255, 201, 77, 0.4);
flex-shrink: 0;
}
.section-header-title {
font-family: "Inter", sans-serif;
font-size: 24px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
text-decoration: none;
transition: color 0.15s ease;
}
a.section-header-title:hover { color: var(--accent); }
.section-header-title .hl { color: var(--accent2); }
/* Layout */
.layout {
max-width: 1180px;
margin: 0 auto;
padding: 30px 24px 70px;
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 28px;
align-items: start;
}
/* Телефонная вёрстка включается по двум условиям, а не по одной ширине.
Второе — про телефон, повёрнутый набок: там 844 px ширины (iPhone 15) и
390 px высоты, порог в 760 не срабатывает, и страница честно строила
десктопную сетку «лента + сайдбар 300 px». Ленте оставалось 417 px, колонка
ника в таблице игроков ужималась до 59 px, а сам ник — до нуля: список
превращался в столбик цифр без имён. Это же окно показывает и ангар
(см. #hangarPlayersMount в hangar.html), поэтому вкладка «Игроки» там была
пустой ровно по той же причине.
Высоту берём вместе с шириной: планшет в альбоме (1024+) остаётся на
десктопной сетке, а низкое окно на большом мониторе — редкость, и
одноколоночная раскладка ему не вредит.
Порог менять — только в паре: он повторён во всех блоках ниже. */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 520px) {
.layout {
/* На телефоне 24px по бокам съедали ~13% ширины экрана — контент
(таблицы, карточки боёв, графики) сжимался зря. Приводим к тем же
14px, что у шапки и верхнего баннера. */
padding: 22px 6px 70px;
/* minmax(0, …), а не 1fr: у «1fr» минимум колонки — min-content самого
широкого блока внутри, и один нерастягиваемый элемент (например заголовок
эфира в одну строку) растягивал всю страницу за экран. На десктопе выше
по той же причине стоит minmax(0, 1fr). */
grid-template-columns: minmax(0, 1fr);
}
.sidebar-col {
order: -1;
}
/* Профиль — исключение: сайдбарная реклама, поднятая над лентой, занимала
~310 px первого экрана, и до первой цифры статистики человек не
доскролливал вовсе. Здесь виджеты уходят под контент. */
.profile-layout .sidebar-col {
order: 1;
}
/* Виджеты сайдбара рендерятся асинхронно и на некоторых страницах могут
остаться пустыми (нет активного розыгрыша/новостей/рекламы) — на
мобильном сайдбар переезжает над лентой, и его пустые обёртки с
отступами превращались в голый промежуток перед контентом. */
.sidebar-col:not(:has(> *:not(:empty))) {
display: none;
}
}
.feed-col { min-width: 0; }
/* Рейтинг танков и подобные широкие HUD-страницы: сайдбар нужен только под
рекламу/виджеты сайдбара (конструктор с зоной sidebar_pages), а сама
страница (таблица со многими колонками) не должна сжиматься до узких
1180px, как обычный .layout — оставляем родной max-width у
.hud-page-main (1600px) и просто добавляем колонку сайдбара сбоку. */
.hud-page-with-sidebar {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 28px;
align-items: start;
}
@media (max-width: 760px), (max-width: 1000px) and (max-height: 520px) {
.hud-page-with-sidebar { grid-template-columns: minmax(0, 1fr); }
}
.back-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 18px;
color: var(--muted);
text-decoration: none;
font-size: 16.1px;
font-weight: 600;
transition: color 0.15s ease;
}
.back-link:hover { color: var(--accent); }
/* Лента скроллится внутри собственного окна, а не тянет вниз всю страницу:
шапка, заголовок и сайдбар остаются на месте. Высота — от вьюпорта минус
шапка сайта и заголовок секции, с полом в 420px для низких экранов. */
.feed {
display: flex;
flex-direction: column;
gap: 6px;
max-height: max(420px, calc(100vh - 250px));
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 6px;
}
/* Полоса прокрутки — намеренно почти невидимая: сплошная светлая дорожка
рядом с постами читается как лишняя рамка и режет глаз. Проявляется
только при наведении на ленту. */
.feed::-webkit-scrollbar { width: 4px; }
.feed::-webkit-scrollbar-track { background: transparent; }
.feed::-webkit-scrollbar-thumb { background: transparent; }
.feed:hover::-webkit-scrollbar-thumb { background: #33393f; }
.feed { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.feed:hover { scrollbar-color: #33393f transparent; }
@media (max-width: 760px), (max-width: 1000px) and (max-height: 520px) {
/* На телефоне отдельная прокрутка внутри блока мешает — там привычнее
листать страницу целиком. */
.feed {
max-height: none;
overflow-y: visible;
padding-right: 0;
}
}
.loading {
color: var(--muted);
font-size: 16.1px;
text-align: center;
padding: 40px 0;
}
.load-more-btn {
display: block;
margin: 22px auto 0;
padding: 12px 32px;
border-radius: var(--radius-pill);
border: 1px solid rgba(255, 201, 77, 0.4);
background: rgba(255, 201, 77, 0.06);
color: var(--accent);
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.load-more-btn:hover { background: var(--accent-grad); border-color: transparent; color: var(--accent-ink); transform: translateY(-1px); }
.load-more-btn:active { filter: brightness(0.88); }
.load-more-btn:disabled { opacity: 0.4; cursor: default; filter: none; background: transparent; color: var(--accent); transform: none; }
/* ---- Плеер эфира на главной (варианты 5b/5d разбора) ---------------------
Раньше блок жил первым в сайдбаре: на ПК это колонка 300 px, плеер 300×169 —
смотреть невозможно. Теперь он первый блок колонки ленты во всю её ширину, а
при прокрутке ниже уходит в мини-окно в углу, не пересоздавая iframe (см.
streamBanner.js), — эфир не перезапускается и страница не подпрыгивает. */
#streamPlayer:not(.has-player) { display: none; }
.stream-player {
position: relative;
/* Плеер стоит в колонке ленты: без min-width: 0 длинное название эфира не
даёт колонке сжаться и на телефоне уносит страницу вбок. */
min-width: 0;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid rgba(145, 70, 255, 0.3);
background: #0e0b14;
}
.stream-player-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
.stream-player-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.stream-live-badge {
position: absolute;
left: 12px;
top: 12px;
display: flex;
align-items: center;
gap: 7px;
padding: 5px 10px;
border-radius: var(--radius-sm);
background: rgba(10, 14, 12, 0.8);
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
pointer-events: none;
}
.stream-live-badge i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #ff3b30;
}
.stream-viewers {
position: absolute;
left: 96px;
top: 12px;
padding: 5px 10px;
border-radius: var(--radius-sm);
background: rgba(10, 14, 12, 0.7);
color: var(--text-dim);
font-size: 11px;
font-weight: 600;
pointer-events: none;
}
.stream-close-btn,
.stream-sound-btn {
position: absolute;
border: none;
border-radius: var(--radius-sm);
background: rgba(10, 14, 12, 0.72);
color: var(--text-dim);
font: inherit;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.stream-close-btn {
right: 12px;
top: 12px;
width: 28px;
height: 28px;
font-size: 13px;
font-weight: 600;
}
/* Кнопка звука — только на телефоне (вариант 5d): на ПК у плеера Twitch есть
собственная панель управления по наведению, и своя кнопка легла бы на неё. */
.stream-sound-btn {
display: none;
right: 12px;
bottom: 12px;
height: 28px;
padding: 0 10px;
color: var(--text);
font-size: 11px;
font-weight: 700;
}
.stream-close-btn:hover,
.stream-sound-btn:hover { background: rgba(145, 70, 255, 0.75); color: #fff; }
.stream-player-foot {
display: flex;
align-items: center;
min-width: 0;
gap: 16px;
padding: 12px 14px;
background: rgba(145, 70, 255, 0.07);
}
.stream-player-meta { flex: 1; min-width: 0; }
.stream-player-title {
display: block;
font-size: 15px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stream-player-sub {
display: block;
margin-top: 2px;
font-size: 13px;
color: var(--text-dim);
}
.stream-player-btn {
flex: none;
height: 34px;
padding: 0 14px;
display: flex;
align-items: center;
border-radius: var(--radius-sm);
background: #9146ff;
color: #fff;
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.stream-player-btn:hover { background: #a366ff; }
/* Мини-окно: прокрутили ленту ниже — плеер уезжает в угол, слот в ленте
держит прежнюю высоту, поэтому страница под пальцем не подпрыгивает. */
.stream-player.is-mini {
position: fixed;
right: 28px;
bottom: 28px;
z-index: 60;
width: 300px;
border-color: rgba(145, 70, 255, 0.45);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
.stream-player.is-mini .stream-player-foot,
.stream-player.is-mini .stream-viewers,
.stream-player.is-mini .stream-sound-btn { display: none; }
.stream-player.is-mini .stream-live-badge {
left: 8px;
top: 8px;
gap: 5px;
padding: 3px 7px;
font-size: 9.5px;
}
.stream-player.is-mini .stream-close-btn {
right: 6px;
top: 6px;
width: 22px;
height: 22px;
font-size: 11px;
}
@media (max-width: 760px), (max-width: 1000px) and (max-height: 520px) {
/* Телефон: плеер во всю ширину экрана сразу под шапкой — край в край. */
#streamPlayer.has-player { margin: 0 -6px; }
.stream-player { border-radius: 0; border-left: none; border-right: none; }
.stream-player-foot { padding: 12px 16px 14px; }
.stream-player-btn { padding: 0 12px; font-size: 12px; }
.stream-sound-btn { display: block; }
.stream-player.is-mini {
right: 12px;
bottom: calc(var(--bottom-tabs-h, 0px) + 12px);
width: 172px;
border-radius: var(--radius);
border: 1px solid rgba(145, 70, 255, 0.45);
margin: 0;
}
.stream-player.is-mini .stream-live-badge { left: 6px; top: 6px; padding: 2px 6px; font-size: 9px; }
.stream-player.is-mini .stream-close-btn { right: 4px; top: 4px; width: 20px; height: 20px; font-size: 10px; }
}
/* Кабинет игрока */
.player-box { display: flex; }
.player-card {
width: 100%;
padding: 24px;
border-radius: var(--radius-sm);
background: var(--surface);
border: 1px solid var(--border);
text-align: center;
}
.player-card p { margin: 0 0 12px; color: var(--text); font-size: 16.1px; }
.player-card .load-more-btn { margin-top: 6px; text-decoration: none; display: inline-block; }
.player-card-profile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
text-align: left;
flex-wrap: wrap;
}
.player-card-row { display: flex; gap: 24px; flex-wrap: wrap; }
.player-card-row p { margin: 0; }
.player-card-profile .load-more-btn { margin: 0; flex-shrink: 0; }
.players-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.players-table {
width: 100%;
min-width: 560px;
border-collapse: separate;
border-spacing: 0;
background: rgba(18, 24, 20, 0.88);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-1);
}
.players-table th {
text-align: left;
padding: 13px 16px;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-faint);
background: rgba(255, 255, 255, 0.025);
border-bottom: 1px solid var(--line);
}
.players-table td {
padding: 12px 16px;
font-size: 14.5px;
border-bottom: 1px solid var(--line-soft);
}
.players-table tbody tr:last-child td { border-bottom: none; }
.players-table-row { cursor: pointer; transition: background 0.15s ease; }
.players-table-row:hover { background: rgba(255, 201, 77, 0.05); }
/* Свой фон профиля — виден слева, к правому краю строки гаснет под цвет
таблицы (см. .pl-row-bg в players.js — тот же приём, но здесь строка
настоящая table-row, а не div-грид, так что фон кладём прямо на tr,
а не отдельным слоем-сиблингом с mask-image: маска задела бы и текст). */
.players-table-row.has-bg {
/* Без transition: у строки с фото ховер меняет НАБОР слоёв background, и
анимация перехода между несовпадающими слоями дёргает саму картинку
(она «плывёт» при наведении). Подсветка появляется мгновенно. */
transition: none;
background:
linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.55) 38%, rgba(12, 15, 13, 0.96) 78%, rgba(12, 15, 13, 0.98) 100%),
var(--profile-bg-image) left center / cover no-repeat;
}
.players-table-row.has-bg:hover {
background:
linear-gradient(90deg, rgba(255, 201, 77, 0.06), rgba(255, 201, 77, 0.06)),
linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.55) 38%, rgba(12, 15, 13, 0.96) 78%, rgba(12, 15, 13, 0.98) 100%),
var(--profile-bg-image) left center / cover no-repeat;
}
.players-table-row.has-bg .clan-member-name,
.players-table-row.has-bg .clan-member-role {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.players-table-nick { font-weight: 600; color: var(--text); }
.players-table-clan { font-weight: 400; color: var(--muted); }
.players-table th.sort-active { color: var(--accent); }
.players-table-rank-col { width: 44px; }
.players-table-rank {
color: var(--muted);
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: center;
}
/* Цвет % побед по порогам: >=70 фиолетовый, 60-70 синий, 50-60 зелёный, <50 обычный */
.wr-purple { color: #b06bf2; font-weight: 700; }
.wr-blue { color: #4d9dff; font-weight: 700; }
.wr-green { color: #4dd67a; font-weight: 700; }
.wr-white { color: var(--text); font-weight: 700; }
/* ---- Страница «Игроки»: личный блок, фильтры и таблица -------------------
Разметку рисует public/players.js. Блок «Вы лучше N% игроков» вынесен над
.layout, чтобы тянуться на обе колонки, но по ширине совпадал с ней. */
.players-intro-inner {
max-width: 1180px;
margin: 0 auto;
padding: 22px 24px 0;
}
.pl-hero {
padding: 22px 24px;
border: 1px solid rgba(255, 201, 77, 0.3);
border-radius: var(--radius);
background: linear-gradient(150deg, rgba(255, 201, 77, 0.13), rgba(255, 255, 255, 0.015));
}
.pl-hero-main {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 28px;
}
.pl-hero-text { min-width: 0; }
.pl-hero-kicker {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
}
.pl-hero-title {
margin-top: 8px;
font-size: 38px;
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
color: #fff;
}
.pl-hero-title span { color: var(--accent); }
.pl-hero-sub {
margin: 7px 0 0;
font-size: 14px;
color: var(--text-dim);
}
.pl-hero-place {
flex-shrink: 0;
text-align: right;
}
.pl-hero-place-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-faint);
}
.pl-hero-place-value {
font-size: 44px;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--accent);
}
.pl-hero-place-total { font-size: 12.5px; color: var(--text-faint); }
.pl-hero-scale { margin-top: 20px; }
/* Метка «▲ вы» ездит вместе с концом полосы, поэтому ей нужна своя строка —
иначе абсолютное позиционирование ломает поток легенды под шкалой. */
.pl-hero-marker { position: relative; height: 20px; }
.pl-hero-marker span {
position: absolute;
top: 2px;
/* На точку встаёт остриё «▲», а не середина всей надписи «▲ вы» — иначе
стрелка уезжает левее конца полосы на половину слова. Сдвиг — половина
ширины самого треугольника, поэтому в em: тянется за кеглем. */
transform: translateX(-0.4em);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
white-space: nowrap;
}
.pl-hero-legend {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--text-faint);
}
.pl-hero-guest {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.pl-hero-guest .pl-hero-title { font-size: 26px; }
.pl-hero-login {
flex: none;
padding: 11px 20px;
border-radius: var(--radius-sm);
background: var(--accent-grad);
color: var(--accent-ink);
font-weight: 700;
font-size: 14px;
text-decoration: none;
white-space: nowrap;
}
.pl-hero-login:hover { filter: brightness(1.08); }
/* Полоса-шкала: одна на все размеры, отличается только высотой */
.pl-bar {
height: 7px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.07);
overflow: hidden;
}
.pl-bar i {
display: block;
height: 100%;
background: linear-gradient(90deg, #f2a93b, #ffd166);
}
.pl-bar-lg { height: 14px; border-radius: 7px; }
/* ---- Кончик шкалы «Ваш результат» ----------------------------------------
Конец заливки постоянно светится, из него вправо тянется поток искр. Искры
лежат внутри самой заливки и гаснут, не долетая до края дорожки, — дорожка
режет их по overflow, так что за пределы шкалы поток не выходит. */
@keyframes plTipBreathe {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
@keyframes plSparkFly {
0% { transform: translate(0, 0) scaleX(1); opacity: 0; }
18% { opacity: var(--op, 0.8); }
55% { opacity: calc(var(--op, 0.8) * 0.55); }
100% { transform: translate(var(--sx), var(--sy)) scaleX(2.4); opacity: 0; }
}
.pl-bar-lg i { position: relative; }
.pl-bar-lg i::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -1px;
width: 22px;
border-radius: 7px;
pointer-events: none;
background: linear-gradient(90deg, rgba(255, 226, 150, 0) 0%, rgba(255, 243, 205, 0.95) 100%);
animation: plTipBreathe 2.2s ease-in-out infinite;
}
.pl-tip-spark {
position: absolute;
left: 100%;
top: calc(50% + var(--y0, 0px));
width: var(--sz, 2px);
height: var(--sz, 2px);
margin-top: calc(var(--sz, 2px) / -2);
border-radius: 50%;
background: radial-gradient(circle, #fff6dc 0%, #ffc94d 45%, #f2a93b 100%);
box-shadow: 0 0 6px rgba(255, 181, 69, 0.85), 0 0 2px rgba(255, 240, 194, 0.9);
opacity: 0;
pointer-events: none;
transform-origin: right center;
animation: plSparkFly 3s linear infinite;
}
/* Разные длительности, задержки, высота вылета и размер — чтобы поток шёл
непрерывно и не читался как повторяющийся цикл. */
.pl-tip-spark:nth-child(1) { animation-duration: 1.93s; animation-delay: 0.09s; --y0: -5px; --sx: 43px; --sy: -1.8px; --sz: 2px; --op: 0.91; }
.pl-tip-spark:nth-child(2) { animation-duration: 1.15s; animation-delay: 0.18s; --y0: -4px; --sx: 38px; --sy: -1.4px; --sz: 1.7px; --op: 0.48; }
.pl-tip-spark:nth-child(3) { animation-duration: 1.6s; animation-delay: 0.3s; --y0: -2.3px; --sx: 41px; --sy: -0.8px; --sz: 2.4px; --op: 0.73; }
.pl-tip-spark:nth-child(4) { animation-duration: 1.44s; animation-delay: 0.38s; --y0: -1px; --sx: 35px; --sy: -0.3px; --sz: 2.5px; --op: 0.64; }
.pl-tip-spark:nth-child(5) { animation-duration: 1.51s; animation-delay: 0.46s; --y0: -0.2px; --sx: 29px; --sy: -0.1px; --sz: 1.8px; --op: 0.68; }
.pl-tip-spark:nth-child(6) { animation-duration: 1.66s; animation-delay: 0.59s; --y0: 1.3px; --sx: 33px; --sy: 0.5px; --sz: 2.1px; --op: 0.76; }
.pl-tip-spark:nth-child(7) { animation-duration: 1.25s; animation-delay: 0.72s; --y0: 2.2px; --sx: 37px; --sy: 0.8px; --sz: 1.6px; --op: 0.53; }
.pl-tip-spark:nth-child(8) { animation-duration: 1.4s; animation-delay: 0.77s; --y0: 3.4px; --sx: 26px; --sy: 1.2px; --sz: 1.6px; --op: 0.61; }
.pl-tip-spark:nth-child(9) { animation-duration: 1.59s; animation-delay: 0.9s; --y0: 4.8px; --sx: 30px; --sy: 1.7px; --sz: 1.8px; --op: 0.72; }
.pl-tip-spark:nth-child(10) { animation-duration: 1.97s; animation-delay: 1.04s; --y0: -5.3px; --sx: 35px; --sy: -1.9px; --sz: 1.6px; --op: 0.94; }
.pl-tip-spark:nth-child(11) { animation-duration: 1.84s; animation-delay: 1.22s; --y0: -3.5px; --sx: 48px; --sy: -1.2px; --sz: 2.5px; --op: 0.86; }
.pl-tip-spark:nth-child(12) { animation-duration: 1.26s; animation-delay: 1.3s; --y0: -2.5px; --sx: 42px; --sy: -0.9px; --sz: 2.2px; --op: 0.54; }
.pl-tip-spark:nth-child(13) { animation-duration: 2s; animation-delay: 1.35s; --y0: -1.3px; --sx: 32px; --sy: -0.5px; --sz: 2px; --op: 0.95; }
.pl-tip-spark:nth-child(14) { animation-duration: 1.83s; animation-delay: 1.48s; --y0: 0.3px; --sx: 35px; --sy: 0.1px; --sz: 2.6px; --op: 0.86; }
.pl-tip-spark:nth-child(15) { animation-duration: 1.5s; animation-delay: 1.56s; --y0: 1.2px; --sx: 30px; --sy: 0.4px; --sz: 2.1px; --op: 0.67; }
.pl-tip-spark:nth-child(16) { animation-duration: 1.93s; animation-delay: 1.72s; --y0: 2.3px; --sx: 39px; --sy: 0.8px; --sz: 1.7px; --op: 0.91; }
.pl-tip-spark:nth-child(17) { animation-duration: 1.49s; animation-delay: 1.88s; --y0: 3.6px; --sx: 48px; --sy: 1.3px; --sz: 1.8px; --op: 0.67; }
.pl-tip-spark:nth-child(18) { animation-duration: 1.68s; animation-delay: 1.98s; --y0: 4.7px; --sx: 46px; --sy: 1.6px; --sz: 1.6px; --op: 0.77; }
.pl-bar-sm { height: 3px; margin-top: 4px; border-radius: 2px; }
.pl-metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 12px;
}
.pl-metric {
padding: 14px 15px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
}
.pl-metric-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-faint);
}
.pl-metric-top {
display: flex;
align-items: baseline;
gap: 8px;
margin: 6px 0 11px;
}
.pl-metric-value {
font-size: 24px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--text);
}
/* Значок лиги слева от рейтинга (см. public/leagues.js) */
.pl-metric-league {
width: 26px;
height: 26px;
object-fit: contain;
align-self: center;
flex: none;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.pl-metric-verdict { font-size: 11.5px; font-weight: 700; }
.pl-v-top { color: var(--accent); }
.pl-v-good { color: #4dd67a; }
.pl-v-low { color: var(--text-faint); }
.pl-metric-foot {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 7px;
font-size: 11.5px;
color: var(--text-faint);
}
.pl-metric-foot b { color: var(--accent); }
.pl-metric-avg { font-variant-numeric: tabular-nums; }
/* Короткий дубль «нет данных» — нужен только узкой мобильной плитке */
.pl-metric-short { display: none; }
/* Панель фильтров */
.pl-toolbar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.pl-search { position: relative; flex: 1; min-width: 0; }
.pl-search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 13px;
color: var(--text-faint);
pointer-events: none;
}
.pl-search input {
width: 100%;
padding: 9px 10px 9px 27px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-family: inherit;
font-size: 13.5px;
outline: none;
}
.pl-search input:focus { border-color: var(--accent); }
/* Фильтр по боям — ползунок: пресетов пять, а порогов у людей больше */
.pl-slider {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 220px;
}
.pl-slider-label {
font-size: 12.5px;
color: var(--muted);
white-space: nowrap;
}
/* Поле для точного значения: ширина резервируется под максимум (см. players.js),
чтобы растущее число не дёргало ползунок при перетаскивании. */
.pl-num input[type="number"] {
padding: 6px 8px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
color: var(--text);
font-family: inherit;
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: right;
outline: none;
}
.pl-num input[type="number"]:focus { border-color: var(--accent); }
.pl-slider input[type="range"] {
flex: 1;
min-width: 120px;
accent-color: var(--accent);
cursor: pointer;
}
.pl-count {
font-size: 11.5px;
color: var(--text-faint);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Таблица топа: не <table>, а грид — так строка перестраивается под мобильный
без дублирования разметки. Колонки шапки и строк должны совпадать. */
.pl-table {
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
box-shadow: var(--shadow-1);
}
.pl-head,
.pl-row {
display: grid;
grid-template-columns: 56px minmax(0, 1fr) 112px 108px 116px;
align-items: center;
}
.pl-head {
background: var(--surface-2);
border-bottom: 1px solid var(--line);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-faint);
}
.pl-head .pl-cell-rank { padding: 11px 0 11px 16px; }
.pl-head .pl-cell-nick { padding: 11px 8px; }
.pl-sort {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
height: 100%;
padding: 11px 14px;
background: transparent;
border: none;
border-left: 1px solid var(--line-soft);
font: inherit;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-faint);
cursor: pointer;
}
.pl-sort:hover { color: var(--text); }
.pl-sort.active { background: rgba(255, 201, 77, 0.08); color: var(--accent); }
.pl-arrow { font-size: 9px; opacity: 0.35; }
.pl-sort.active .pl-arrow { opacity: 1; }
.pl-row {
border-bottom: 1px solid var(--line-soft);
cursor: pointer;
transition: background 0.15s ease;
}
.pl-row:last-child { border-bottom: none; }
.pl-row:hover { background: rgba(255, 201, 77, 0.05); }
/* Своя строка подсвечена всегда — её ищут в первую очередь */
.pl-row.is-me { background: rgba(255, 201, 77, 0.09); box-shadow: inset 2px 0 0 var(--accent); }
.pl-row .pl-cell-rank { padding-left: 16px; }
.pl-rank {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 24px;
padding: 0 6px;
border-radius: 5px;
font-family: Oswald, Inter, sans-serif;
font-size: 15px;
font-weight: 600;
font-variant-numeric: tabular-nums;
background: rgba(10, 12, 10, 0.72);
color: var(--text-faint);
}
/* Медали. Свечение — отдельный слой на ячейке (::before), а не тень на самом
значке: тень обрезала бы соседняя ячейка, а z-index:-1 увёл бы свечение под
фон .pl-table. Псевдоэлемент ячейки рисуется раньше значка по дереву, поэтому
номер остаётся сверху без всякого z-index. */
.pl-cell-rank.pl-medal { position: relative; }
.pl-cell-rank.pl-medal::before {
content: '';
position: absolute;
left: 4px;
top: 50%;
width: 46px;
height: 46px;
transform: translateY(-50%);
border-radius: 50%;
pointer-events: none;
}
.pl-medal .pl-rank {
min-width: 30px;
height: 28px;
font-size: 17px;
font-weight: 700;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.pl-medal-1 .pl-rank {
background: linear-gradient(150deg, #fff0c2 0%, #ffc94d 42%, #e59a1f 100%);
color: #221600;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 9px rgba(255, 201, 77, 0.32);
}
.pl-medal-1::before { background: radial-gradient(circle, rgba(255, 201, 77, 0.2), transparent 62%); }
.pl-medal-2 .pl-rank {
background: linear-gradient(150deg, #ffffff 0%, #cdd8d0 45%, #8c9b92 100%);
color: #131a15;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 8px rgba(214, 231, 220, 0.2);
}
.pl-medal-2::before { background: radial-gradient(circle, rgba(214, 231, 220, 0.11), transparent 62%); }
.pl-medal-3 .pl-rank {
background: linear-gradient(150deg, #ffd0a3 0%, #e08b41 45%, #a5561d 100%);
color: #2a1405;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 8px rgba(230, 140, 70, 0.26);
}
.pl-medal-3::before { background: radial-gradient(circle, rgba(230, 140, 70, 0.13), transparent 62%); }
/* ---- Искры и подсветка призёров ------------------------------------------
Пыль вылетает из окошка места влево, под ником — медленное «дыхание» фона.
Восемь траекторий, чтобы соседние частицы не летели одинаково; размеры,
задержки и вертикальный разброс задаются по nth-child ниже. */
@keyframes plSparkA {
0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
16% { opacity: 1; transform: translate(-4px, -1px) scale(1) rotate(-40deg); }
70% { opacity: 0.5; transform: translate(-11px, -4px) scale(0.6) rotate(-170deg); }
100% { opacity: 0; transform: translate(-15px, -5px) scale(0.2) rotate(-250deg); }
}
@keyframes plSparkB {
0% { opacity: 0; transform: translate(0, 0) scale(0.28) rotate(0deg); }
18% { opacity: 0.95; transform: translate(-4px, 2px) scale(0.95) rotate(35deg); }
70% { opacity: 0.5; transform: translate(-10px, 6px) scale(0.55) rotate(150deg); }
100% { opacity: 0; transform: translate(-14px, 9px) scale(0.2) rotate(215deg); }
}
@keyframes plSparkC {
0% { opacity: 0; transform: translate(0, 0) scale(0.35) rotate(20deg); }
14% { opacity: 1; transform: translate(-3px, 1px) scale(1.1) rotate(-25deg); }
70% { opacity: 0.5; transform: translate(-11px, 3px) scale(0.55) rotate(-140deg); }
100% { opacity: 0; transform: translate(-16px, 5px) scale(0.15) rotate(-195deg); }
}
@keyframes plSparkD {
0% { opacity: 0; transform: translate(0, 0) scale(0.25) rotate(-15deg); }
20% { opacity: 0.9; transform: translate(-5px, -3px) scale(0.85) rotate(55deg); }
70% { opacity: 0.45; transform: translate(-10px, -8px) scale(0.5) rotate(180deg); }
100% { opacity: 0; transform: translate(-14px, -11px) scale(0.15) rotate(265deg); }
}
@keyframes plSparkE {
0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(10deg); }
16% { opacity: 1; transform: translate(-3px, 3px) scale(1) rotate(-45deg); }
70% { opacity: 0.5; transform: translate(-11px, 8px) scale(0.55) rotate(-160deg); }
100% { opacity: 0; transform: translate(-15px, 12px) scale(0.18) rotate(-235deg); }
}
@keyframes plSparkF {
0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(-30deg); }
22% { opacity: 0.85; transform: translate(-6px, -1px) scale(0.9) rotate(40deg); }
70% { opacity: 0.45; transform: translate(-12px, -3px) scale(0.5) rotate(165deg); }
100% { opacity: 0; transform: translate(-16px, -4px) scale(0.15) rotate(240deg); }
}
@keyframes plSparkG {
0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
12% { opacity: 1; transform: translate(-5px, -4px) scale(1.05) rotate(-55deg); }
68% { opacity: 0.45; transform: translate(-12px, -10px) scale(0.5) rotate(-190deg); }
100% { opacity: 0; transform: translate(-16px, -14px) scale(0.12) rotate(-290deg); }
}
@keyframes plSparkH {
0% { opacity: 0; transform: translate(0, 0) scale(0.32) rotate(15deg); }
12% { opacity: 1; transform: translate(-5px, 4px) scale(1.05) rotate(60deg); }
68% { opacity: 0.45; transform: translate(-12px, 10px) scale(0.5) rotate(200deg); }
100% { opacity: 0; transform: translate(-16px, 14px) scale(0.12) rotate(300deg); }
}
@keyframes plGlowBreathe {
0%, 100% { opacity: 0.82; }
50% { opacity: 1; }
}
@keyframes plBadgePulse {
0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 9px rgba(255, 201, 77, 0.28); }
50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 12px rgba(255, 201, 77, 0.4); }
}
/* Точка вылета — правый край значка; сам контейнер нулевого размера, чтобы не
влиять на сетку строки. */
.pl-sparks {
position: absolute;
left: 17px;
top: 50%;
width: 0;
height: 0;
pointer-events: none;
}
.pl-sparks i {
position: absolute;
display: block;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* Размер, вертикальный разброс, траектория и задержка — по номеру частицы */
.pl-sparks i:nth-child(1) { width: 4.8px; height: 6.6px; top: -13px; animation: plSparkA 0.95s linear infinite; }
.pl-sparks i:nth-child(2) { width: 3.9px; height: 5.4px; top: -9px; animation: plSparkB 1.1s linear 0.12s infinite; }
.pl-sparks i:nth-child(3) { width: 3.3px; height: 4.6px; top: -5px; animation: plSparkC 0.9s linear 0.24s infinite; }
.pl-sparks i:nth-child(4) { width: 4.5px; height: 6.2px; top: -1px; animation: plSparkD 1.15s linear 0.36s infinite; }
.pl-sparks i:nth-child(5) { width: 2.7px; height: 3.8px; top: 3px; animation: plSparkE 1s linear 0.48s infinite; }
.pl-sparks i:nth-child(6) { width: 3.9px; height: 5.4px; top: 7px; animation: plSparkF 1.25s linear 0.6s infinite; }
.pl-sparks i:nth-child(7) { width: 5.2px; height: 7.2px; top: 11px; animation: plSparkG 1.05s linear 0.72s infinite; }
.pl-sparks i:nth-child(8) { width: 5px; height: 6.8px; top: -11px; animation: plSparkH 1.2s linear 0.84s infinite; }
.pl-sparks i:nth-child(9) { width: 3.4px; height: 4.7px; top: 9px; animation: plSparkA 1.35s linear 0.96s infinite; }
.pl-sparks i:nth-child(10) { width: 3px; height: 4.2px; top: 1px; animation: plSparkC 1.45s linear 1.08s infinite; }
/* Цвет пыли — по медали. Оттенки чередуются, чтобы поток не выглядел плоским. */
.pl-medal-1 .pl-sparks i { filter: drop-shadow(0 0 4px rgba(255, 201, 77, 0.9)); background: #ffc94d; }
.pl-medal-1 .pl-sparks i:nth-child(3n + 1) { background: #fff0c2; }
.pl-medal-1 .pl-sparks i:nth-child(7) { background: #ffffff; }
.pl-medal-1 .pl-sparks i:nth-child(5) { background: #ffb545; }
.pl-medal-1 .pl-sparks i:nth-child(6), .pl-medal-1 .pl-sparks i:nth-child(10) { background: #ffe9a8; }
/* У серебра и бронзы частиц меньше — иначе первое место перестаёт выделяться.
Лишние прячем, а не убираем из разметки: счётчик nth-child общий. */
.pl-medal-2 .pl-sparks i { filter: drop-shadow(0 0 4px rgba(214, 231, 220, 0.75)); background: #cdd8d0; }
.pl-medal-2 .pl-sparks i:nth-child(odd) { background: #ffffff; }
.pl-medal-2 .pl-sparks i:nth-child(2) { background: #e8f1ec; }
.pl-medal-2 .pl-sparks i:nth-child(n + 5) { display: none; }
/* Ниже золота поток заметно спокойнее — иначе первое место не выделяется */
.pl-medal-2 .pl-sparks i { animation-duration: 1.8s; }
.pl-medal-2 .pl-sparks i:nth-child(2) { animation-duration: 2.1s; }
.pl-medal-2 .pl-sparks i:nth-child(3) { animation-duration: 1.6s; }
.pl-medal-3 .pl-sparks i { filter: drop-shadow(0 0 4px rgba(230, 140, 70, 0.8)); background: #ffd0a3; }
.pl-medal-3 .pl-sparks i:nth-child(2) { background: #e08b41; }
.pl-medal-3 .pl-sparks i:nth-child(3) { background: #ffe0c2; }
.pl-medal-3 .pl-sparks i:nth-child(n + 4) { display: none; }
.pl-medal-3 .pl-sparks i { animation-duration: 1.9s; }
.pl-medal-3 .pl-sparks i:nth-child(2) { animation-duration: 1.7s; }
/* Значок первого места медленно пульсирует — 6 с, чтобы это читалось как
свечение, а не как мигание. */
.pl-medal-1 .pl-rank { animation: plBadgePulse 6s ease-in-out infinite; }
/* Подсветка полосой под ником. Ячейку намеренно не режем по overflow: срез
рубил бы размытие ровно по левой границе и давал вертикальный шов. Полоса
уходит влево под значок места, где её прозрачное начало не видно; справа
градиент гаснет сам, так что обрезать нечего. */
.pl-row-1 .pl-cell-nick,
.pl-row-2 .pl-cell-nick,
.pl-row-3 .pl-cell-nick {
position: relative;
}
.pl-nick-glow {
position: absolute;
top: 0;
bottom: 0;
left: -64px;
right: 0;
filter: blur(4px);
pointer-events: none;
animation: plGlowBreathe 9s ease-in-out infinite;
}
.pl-row-1 .pl-nick-glow {
background: linear-gradient(90deg, transparent 0%, rgba(255, 201, 77, 0.16) 34%, rgba(255, 201, 77, 0.08) 58%, transparent 92%);
}
.pl-row-2 .pl-nick-glow {
background: linear-gradient(90deg, transparent 0%, rgba(214, 231, 220, 0.12) 34%, rgba(214, 231, 220, 0.055) 58%, transparent 90%);
animation-duration: 10.5s;
animation-delay: 1.5s;
}
.pl-row-3 .pl-nick-glow {
background: linear-gradient(90deg, transparent 0%, rgba(230, 140, 70, 0.13) 34%, rgba(230, 140, 70, 0.06) 58%, transparent 90%);
animation-duration: 12s;
animation-delay: 3s;
}
/* Ник и тег клана лежат над подсветкой */
.pl-nick,
.pl-clan { position: relative; }
@media (prefers-reduced-motion: reduce) {
.pl-sparks,
.pl-tip-spark { display: none; }
.pl-bar-lg i::after { animation: none; }
.pl-nick-glow,
.pl-medal-1 .pl-rank { animation: none; }
}
/* Строки призёров чуть подсвечены — свечению значка нужно во что-то ложиться.
:not(:hover):not(.is-me) — иначе эти правила тем же весом перебивают
подсветку наведения и своей строки, объявленные выше. */
/* Подсветка начинается прозрачной и разгорается уже внутри строки. Если дать
ей цвет прямо на левой кромке, край строки читается как рамка — у призёров
она есть, у четвёртого места нет, и таблица выглядит рассыпавшейся. */
.pl-row:not(:hover):not(.is-me).pl-row-1 { background: linear-gradient(90deg, transparent 0%, rgba(255, 201, 77, 0.055) 16%, transparent 52%); }
.pl-row:not(:hover):not(.is-me).pl-row-2 { background: linear-gradient(90deg, transparent 0%, rgba(214, 231, 220, 0.04) 15%, transparent 46%); }
.pl-row:not(:hover):not(.is-me).pl-row-3 { background: linear-gradient(90deg, transparent 0%, rgba(230, 140, 70, 0.04) 14%, transparent 42%); }
.pl-cell-nick {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
padding: 10px 8px;
}
/* Своя аватарка (см. uploads/avatars) — кружок перед ником, буква-плейсхолдер,
когда своей аватарки нет. */
.pl-avatar {
flex: none;
width: 26px;
height: 26px;
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
overflow: hidden;
background: var(--surface-2);
border: 1px solid var(--border-strong, var(--line));
display: flex;
align-items: center;
justify-content: center;
font-family: Oswald, Inter, sans-serif;
font-size: 12px;
font-weight: 700;
color: var(--accent);
}
.pl-avatar.has-pic { background: transparent; }
.pl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Свой фон профиля — вылезает из-под левого края строки (номер + ник) и гаснет
к правому краю (там числа, их фон не должен спорить с цифрами). Отдельный
слой-сиблинг ячеек, а не background строки: маску-затухание на фон строки
с grid-раскладкой иначе не положить. */
.pl-row-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%),
var(--profile-bg-image) left center / cover no-repeat;
-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 45%, transparent 82%);
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 45%, transparent 82%);
}
.pl-row.has-bg { position: relative; }
.pl-row.has-bg > *:not(.pl-row-bg) { position: relative; z-index: 1; }
.pl-row.has-bg .pl-rank { color: var(--text); }
.pl-nick {
font-size: 14.5px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pl-clan {
flex-shrink: 0;
color: var(--accent);
font-size: 13px;
font-weight: 800;
}
/* Подписи у чисел нужны только в мобильной карточке: в таблице их роль
выполняет шапка колонки. */
.pl-battles-suffix,
.pl-caption { display: none; }
.pl-cell-battles,
.pl-cell-wr {
padding: 0 14px;
text-align: right;
font-size: 14px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.pl-cell-battles { color: var(--text); }
.pl-cell-dmg {
padding: 8px 16px 8px 14px;
text-align: right;
}
.pl-dmg-value { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); }
/* Виджет распределения % побед в сайдбаре */
.pl-widget {
padding: 14px;
border: 1px solid var(--line);
border-radius: var(--radius);
background-color: rgba(18, 24, 20, 0.88);
background-image: var(--glass);
}
.pl-widget-title {
margin-bottom: 9px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}
.pl-hist {
display: flex;
align-items: flex-end;
gap: 4px;
height: 70px;
}
.pl-hist-col {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 4px;
height: 100%;
}
.pl-hist-bar {
min-height: 2px;
border-radius: 2px 2px 0 0;
background: rgba(255, 255, 255, 0.16);
}
.pl-hist-col.is-top .pl-hist-bar { background: rgba(255, 255, 255, 0.34); }
.pl-hist-col.is-me .pl-hist-bar { background: var(--accent-grad); }
/* Кривая распределения. preserveAspectRatio="none" тянет viewBox по ширине,
поэтому линия задаётся non-scaling-stroke — иначе она плющится вместе с
координатами и слева выглядит толще, чем справа. */
/* Пропорции держим сами: раньше стояло preserveAspectRatio="none" при фиксированной
высоте, и на широкой колонке кривую растягивало по горизонтали — горб уезжал,
а точки становились овалами. Теперь высота считается от ширины по тому же
отношению, что у viewBox, и картинка масштабируется без искажения. */
.pl-chart svg {
display: block;
width: 100%;
height: auto;
aspect-ratio: 240 / 76;
overflow: visible;
}
.pl-chart-line {
fill: none;
stroke: var(--accent);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.pl-chart-rule {
stroke: rgba(255, 255, 255, 0.18);
stroke-width: 1;
stroke-dasharray: 2 3;
vector-effect: non-scaling-stroke;
}
.pl-chart-dot {
vector-effect: non-scaling-stroke;
stroke-width: 2;
}
.pl-chart-dot.is-top { fill: var(--bg); stroke: rgba(255, 255, 255, 0.45); }
.pl-chart-dot.is-me { fill: var(--accent); stroke: var(--bg); }
/* Ось: те же деления, что у кривой, — по одному на корзину. */
.pl-hist-axis {
display: flex;
gap: 4px;
margin-top: 6px;
}
.pl-hist-label {
flex: 1;
font-size: 8.5px;
text-align: center;
color: var(--text-faint);
font-variant-numeric: tabular-nums;
}
.pl-hist-label.is-top { color: var(--text-dim); }
.pl-hist-label.is-me { color: var(--accent); font-weight: 700; }
.pl-widget-foot {
margin-top: 11px;
padding-top: 10px;
border-top: 1px solid var(--line);
font-size: 11.5px;
color: var(--text-faint);
}
@media (max-width: 900px) {
.pl-metrics { grid-template-columns: repeat(2, 1fr); }
.pl-hero-title { font-size: 30px; }
}
@media (max-width: 760px), (max-width: 1000px) and (max-height: 520px) {
/* На телефоне блок «Ваш результат» — не витрина, а строчка контекста перед
таблицей: крупные десктопные кегли и отступы съедали весь первый экран. */
.players-intro-inner { padding: 10px 6px 0; }
.pl-hero { padding: 11px 12px; }
/* display:contents — чтобы «место в топе» встало под шкалу: order работает
только между соседями, а внутри .pl-hero-main шкала ему не соседка. */
.pl-hero-main { display: contents; }
.pl-hero-text { order: 1; }
.pl-hero-title { font-size: 18px; }
.pl-hero-kicker { font-size: 9.5px; }
.pl-hero-sub { margin-top: 3px; font-size: 11.5px; }
/* Подписи «новички / лучшие» под шкалой: на десктопе они объясняют ось, на
телефоне это лишняя строка — направление и так читается по заливке. */
.pl-hero-legend { display: none; }
/* Место в топе уезжает под шкалу отдельной строкой — справа от заголовка
на 390 px оно отжимает фразу «Вы лучше N%» до переносов по одному слову. */
.pl-hero-place {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: 7px;
padding-top: 7px;
border-top: 1px solid var(--border-strong);
text-align: left;
order: 3;
}
.pl-hero { display: flex; flex-direction: column; }
.pl-hero-scale { order: 2; margin-top: 10px; }
.pl-bar-lg { height: 8px; border-radius: 4px; }
/* Кончик и радиус — под тонкую мобильную шкалу */
.pl-bar-lg i::after { width: 15px; border-radius: 4px; }
.pl-hero-marker { height: 14px; }
.pl-hero-marker span { font-size: 9.5px; }
.pl-hero-place-label { display: none; }
.pl-hero-place-value { font-size: 18px; }
.pl-hero-place-total { font-size: 11.5px; }
.pl-hero-place-total::before { content: 'место '; }
/* Четыре карточки 2×2 занимали почти двести пикселей. На телефоне это не
карточки, а строка-плитка: подпись, число, полоса и голый процент —
словесный вердикт и «среднее» уходят, они дублируют то же самое. */
.pl-metrics { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 7px; }
.pl-metric { padding: 7px 6px; text-align: center; }
.pl-metric-label { font-size: 8px; letter-spacing: 0.04em; }
/* На телефоне плитка узкая: значок и число встают в строку по центру */
.pl-metric-top { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 2px 0 5px; }
.pl-metric-value { font-size: 14px; }
.pl-metric-league { width: 18px; height: 18px; }
.pl-metric-verdict { display: none; }
/* Именно .pl-metric .pl-bar, а не .pl-bar: голый селектор тем же весом
перебил бы .pl-bar-lg выше и заодно сплющил шкалу в шапке. */
.pl-metric .pl-bar { height: 4px; border-radius: 2px; }
.pl-metric-foot { display: block; margin-top: 4px; font-size: 10px; text-align: center; }
.pl-metric-word,
.pl-metric-avg { display: none; }
.pl-metric-short { display: inline; }
.pl-hero-guest .pl-hero-title { font-size: 20px; }
.pl-toolbar { flex-wrap: wrap; }
.pl-search { flex: 1 0 100%; }
.pl-count { display: none; }
.pl-slider { flex: 1 0 100%; }
/* Строка превращается в карточку: ранг слева, ник и «лучше N%» в столбик,
справа урон и % побед. Колонка боёв на такой ширине только шумит. */
.pl-table { border: none; border-radius: 0; background: transparent; box-shadow: none; }
/* Колонок в карточке нет, но сортировка нужна и здесь: шапка превращается в
ряд чипов «Бои / Побед / Ср. урон» над списком. Раньше она просто скрывалась,
и на телефоне список намертво оставался в сортировке по умолчанию. */
.pl-head {
display: flex;
gap: 6px;
padding: 0 0 10px;
background: transparent;
border-bottom: none;
}
.pl-head .pl-cell-rank,
.pl-head .pl-cell-nick { display: none; }
.pl-sort {
flex: 1;
height: auto;
justify-content: center;
gap: 4px;
padding: 8px 6px;
border: 1px solid var(--line);
border-left: 1px solid var(--line);
border-radius: 999px;
background: var(--surface-2);
font-size: 10px;
letter-spacing: 0.06em;
}
.pl-sort.active { border-color: var(--accent); }
/* Пыль летит и здесь: таблице на мобильном снимаем обрезку, чтобы искры не
срезало ровной вертикалью по кромке. Карточка тут без фона и рамки, так
что «за краем» — просто поле страницы, и вылет читается нормально.
Ореол при этом ужат и целиком внутри ячейки, иначе он засвечивал кромку. */
.pl-table { overflow: visible; }
.pl-sparks { left: 2px; transform: scale(0.85); }
.pl-cell-rank.pl-medal::before { left: 1px; width: 34px; height: 34px; }
/* Подсветка под ником остаётся выключенной: в карточке ник занимает одну
строку, и полоса вырождается в прямоугольник с резкими краями. */
.pl-nick-glow { display: none; }
.pl-row {
grid-template-columns: 32px minmax(0, 1fr) auto;
grid-template-areas:
'rank nick dmg'
'rank better wr';
column-gap: 11px;
row-gap: 2px;
padding: 11px 2px;
border-bottom: 1px solid var(--line-soft);
}
.pl-row.is-me { box-shadow: none; border-radius: var(--radius-sm); padding-left: 8px; padding-right: 8px; }
.pl-row .pl-cell-rank { grid-area: rank; padding-left: 0; }
.pl-cell-nick { grid-area: nick; padding: 0; }
.pl-cell-battles { grid-area: better; text-align: left; padding: 0; font-size: 11.5px; font-weight: 700; color: var(--text-dim); }
.pl-battles-suffix { display: inline; }
.pl-cell-wr { grid-area: wr; padding: 0; font-size: 12px; font-weight: 700; }
.pl-cell-dmg { grid-area: dmg; padding: 0; font-size: 15px; font-weight: 700; }
/* «ср. урон 4 393» вместо голого числа: в карточке нет шапки, и без подписи
непонятно, урон это, рейтинг или ещё что-то. */
.pl-caption {
display: inline;
font-size: 10.5px;
font-weight: 600;
color: var(--text-faint);
letter-spacing: 0.02em;
}
.pl-dmg-value { font-size: 15px; font-weight: 700; }
.pl-bar-sm { display: none; }
.pl-nick { font-size: 15px; }
}
/* Карточка профиля игрока */
@keyframes heroGradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes heroFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.profile-hero {
position: relative;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-bottom: 20px;
overflow: hidden;
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.profile-hero { animation: heroFadeIn 0.5s ease both; }
}
/* Баннер-шапка как в личном кабинете игры: тёмный сине-фиолетовый градиент
с лёгким свечением по центру вместо сюжетной иллюстрации — держит фирменный
стиль сайта, не тянет стороннюю арт-графику. */
.profile-hero-banner {
position: relative;
padding: 26px 24px 22px;
background:
radial-gradient(ellipse 60% 100% at 50% 0%, rgba(242, 169, 59, 0.16), transparent 70%),
linear-gradient(135deg, #1a1330 0%, #241a3d 35%, #171225 70%, #120e1c 100%);
border-bottom: 1px solid var(--border);
}
.profile-hero-title-row {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.profile-clan-tag {
color: var(--accent);
font-weight: 800;
font-size: 20px;
letter-spacing: -0.01em;
}
.profile-nick {
margin: 0;
font-size: 32px;
letter-spacing: -0.02em;
text-transform: none;
}
.profile-id-hint {
color: var(--text-faint);
font-size: 13px;
font-weight: 500;
padding: 2px 10px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.05);
align-self: center;
}
.profile-hero-sub {
margin-top: 6px;
color: var(--muted);
font-size: 13.5px;
}
.profile-hero-sub::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
margin-right: 7px;
vertical-align: 1px;
box-shadow: 0 0 8px rgba(143, 209, 63, 0.7);
}
.profile-hero-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 18px;
}
.hero-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 18px;
min-height: 38px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--border);
color: var(--text);
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
/* часть кнопок-героев — ссылки (<a>), подчёркивание им не нужно */
text-decoration: none;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.hero-btn:hover:not(:disabled) { border-color: var(--border-strong); background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }
.hero-btn:active:not(:disabled) { filter: brightness(0.9); }
.hero-btn:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.55; }
.hero-btn-accent {
background: var(--accent-grad);
border-color: transparent;
color: var(--accent-ink);
font-weight: 700;
}
.hero-btn-accent:hover:not(:disabled) {
background: var(--accent-grad);
border-color: transparent;
color: var(--accent-ink);
box-shadow: 0 6px 20px rgba(255, 201, 77, 0.3);
}
.profile-metric-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
padding: 14px;
border-top: 1px solid var(--line-soft);
}
@keyframes metricPopIn {
from { opacity: 0; transform: translateY(8px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.metric-card {
padding: 14px 16px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.035);
border: 1px solid var(--line-soft);
display: flex;
align-items: center;
gap: 13px;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.metric-pop { animation: metricPopIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: var(--pop-delay, 0ms); }
.metric-card:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--border-strong); transform: translateY(-2px); }
.metric-icon {
width: 42px;
height: 42px;
object-fit: contain;
flex-shrink: 0;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.metric-card-body {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.metric-label {
font-size: 11.5px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* На телефоне 4 карточки в minmax(180px,1fr) схлопываются в одну колонку —
каждая на всю ширину экрана, огромная. Вместо этого — сетка 2×2:
карточки поменьше, но иконка+текст в ряд, как на десктопе, без тесноты
ужатого в 4 колонки варианта. */
@media (max-width: 640px) {
.profile-metric-row {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
padding: 10px;
}
.metric-card {
gap: 10px;
padding: 10px 12px;
}
.metric-icon { width: 30px; height: 30px; }
.metric-label {
font-size: 11px;
white-space: normal;
line-height: 1.2;
}
.metric-card strong { font-size: 18px; }
}
.metric-card strong {
font-family: "Inter", sans-serif;
font-size: 22px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--text);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.metric-win { color: #6fd1e0; }
/* Та же сетка тайлов, что в шапке профиля, но самостоятельным блоком —
нужна рамка со всех сторон, а не только сверху (как под баннером). */
.records-row { border: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) {
.metric-pop { animation: none; }
}
.rating-hint {
margin: 10px 0 0;
font-size: 12.6px;
color: var(--muted);
font-style: italic;
}
.details-block { margin-bottom: 14px; }
.details-toggle {
padding: 8px 16px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
color: var(--text);
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.details-toggle:hover { border-color: var(--accent); }
.details-toggle.toggle-open { border-color: var(--accent); color: var(--accent); }
/* Достижения / медали игрока — сгруппированы по категориям (как в личном
кабинете игры: "Герой битвы 12/12", "Почётные звания 22/29"), внутри каждой
сетка ровно 5 в ряд, карточка в стиле игрового значка мастерства: крупная
иконка, под ней крупное число, под числом подпись. */
.achievement-groups {
display: flex;
flex-direction: column;
gap: 22px;
}
.achievement-group-head {
font-size: 15px;
font-weight: 800;
color: var(--text);
padding-bottom: 8px;
margin-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.achievement-group-progress {
color: var(--muted);
font-weight: 600;
font-size: 13.8px;
}
.achievement-grid {
/* Тот же ритм, что у полоски превью в профиле: узкие плитки, много в ряд,
без растянутых на полстраницы карточек. */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
gap: 10px;
}
/* На телефоне — шесть в ряд: плитки мельче, но весь список виден без
горизонтальных подвижек и листается вертикально. */
@media (max-width: 640px) {
.achievement-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.achievement-card { padding: 7px 2px 6px; gap: 4px; }
.achievement-icon, .achievement-icon-placeholder { max-width: 42px; font-size: 22px; }
.achievement-count { font-size: 10px; padding: 1px 2px; }
.achievement-name { font-size: 8.6px; line-height: 1.2; letter-spacing: 0; }
.achievement-group-head { font-size: 13.5px; }
}
.achievement-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
padding: 12px 6px 10px;
border-radius: var(--radius-sm);
background: var(--surface);
background-image: var(--texture-panel);
background-size: var(--texture-size);
border: 1px solid var(--border);
text-align: center;
transition: border-color 0.15s ease, transform 0.15s ease;
cursor: default;
}
.achievement-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.achievement-icon {
width: 100%;
max-width: 74px;
aspect-ratio: 1;
height: auto;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.achievement-icon-placeholder {
width: 100%;
max-width: 74px;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
}
/* Счётчик — такая же угловатая табличка, как в полоске достижений профиля */
.achievement-count {
display: block;
width: 100%;
padding: 2px 4px;
border: 1px solid rgba(255, 201, 77, 0.38);
border-radius: 3px;
background: linear-gradient(180deg, rgba(255, 201, 77, 0.16), rgba(255, 201, 77, 0.04));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
font-family: "Inter", sans-serif;
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.02em;
color: #ffd97a;
text-align: center;
line-height: 1.4;
}
.achievement-card:hover .achievement-count { border-color: var(--accent); }
.achievement-name {
width: 100%;
overflow-wrap: anywhere;
font-size: 11.5px;
font-weight: 600;
color: var(--text);
line-height: 1.25;
text-transform: uppercase;
letter-spacing: 0.02em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Список техники: заголовок, сортировка, фильтры */
/* --- Панель управления базой техники (/vehicles) ---------------------------
Поиск и сортировка, под ними вкладки наций, ниже — всегда видимые фильтры.
На узком экране блок .vfilter-bar тем же CSS превращается в нижнюю шторку,
которую открывает кнопка рядом с поиском (разметка при этом одна). */
.vehicles-toolbar {
padding: 14px 16px;
border-radius: var(--radius-sm);
background-color: rgba(18, 24, 20, 0.55);
background-image: var(--glass);
border: 1px solid var(--line-soft);
margin-bottom: 18px;
}
.vtool-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.vtool-label {
font-size: 11.5px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.vsearch { position: relative; flex: 1; min-width: 220px; }
.vsearch-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 15px;
height: 15px;
fill: none;
stroke: var(--text-faint);
stroke-width: 2.4;
pointer-events: none;
}
.vsearch input {
width: 100%;
box-sizing: border-box;
padding: 10px 14px 10px 38px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
color: var(--text);
font: inherit;
font-size: 14px;
}
.vsearch input:focus {
outline: none;
border-color: rgba(255, 201, 77, 0.5);
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 0 0 3px rgba(255, 201, 77, 0.12);
}
/* Кнопка фильтров нужна только там, где фильтры уехали в шторку */
.vfilter-btn { display: none; }
.vfilter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--line-soft);
}
/* Каждая группа — своя строка: подпись слева, чипы одной лентой справа.
Чипы раскладываем сеткой равных колонок (5 типов, 10 уровней), поэтому
ряд не переносится ни на узкой панели, ни в мобильной шторке; когда места
совсем мало, container-query переключает подписи типов на короткие. */
.vfilter-bar .filter-group {
container-type: inline-size;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 8px;
flex: 1 1 100%;
margin: 0;
}
.vfilter-bar .filter-group-label { margin: 0; font-size: 11.5px; }
.vfilter-bar .filter-group-chips { display: grid; gap: 6px; }
.vfilter-bar .filter-group-types { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vfilter-bar .filter-group-tiers { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.vfilter-bar .filter-chip {
margin: 0;
min-width: 0;
justify-content: center;
padding: 6px 8px;
overflow: hidden;
white-space: nowrap;
}
.vfilter-bar .filter-chip-tier { padding: 6px 4px; }
.chip-short { display: none; }
/* Пороги — по ширине самой группы, а не окна: панель ужимается и сайдбаром,
и шторкой, и просто узким окном. */
@container (max-width: 620px) {
.filter-group-types .chip-full { display: none; }
.filter-group-types .chip-short { display: inline; }
.filter-group-types .filter-chip-icon { margin-right: 4px; }
}
@container (max-width: 430px) {
.vfilter-bar .filter-chip { font-size: 12px; padding: 6px 4px; }
.vfilter-bar .filter-chip-tier { font-size: 11px; letter-spacing: -0.02em; }
.filter-group-types .filter-chip-icon { display: none; }
}
.filter-chip-icon { width: 13px; height: 13px; object-fit: contain; margin-right: 6px; flex: none; }
.filter-chip.active .filter-chip-icon { filter: brightness(0) saturate(100%); }
.filter-chip-prem-mark { margin-right: 6px; font-size: 11px; }
.filter-chip-prem-full { display: none; }
.vfilter-reset {
border: 0;
background: none;
color: var(--accent);
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
padding: 6px 8px;
}
.vfilter-reset:hover { color: var(--accent-hover, #ffd166); }
.vfilter-reset-inline { margin-left: auto; }
/* Заголовок и кнопка «Показать N» — части шторки, на ПК они не нужны */
.vfilter-sheet-head,
.vfilter-apply,
.vfilter-scrim { display: none; }
.vehicles-empty {
padding: 36px 20px;
text-align: center;
border: 1px dashed var(--line);
border-radius: var(--radius-sm);
margin-top: 18px;
}
.vehicles-empty-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.vehicles-empty-text { color: var(--muted); font-size: 13.5px; margin-bottom: 16px; }
.tank-card-type-icon { width: 11px; height: 11px; object-fit: contain; margin-right: 5px; flex-shrink: 0; }
.tank-card.tank-rare .tank-card-type-icon { filter: var(--tank-rarity-tint); }
/* Вкладки наций в панели: флаг вместо подписи — он заполняет всю плитку,
как в подборе наций на /top. Название прячем визуально (оно есть в title и
aria-label), поэтому весь ряд наций встаёт в одну строку.
Кадр берём от левого верхнего угла и с запасом: у исходников карусели
справа и снизу идёт выцветающая кайма. */
.vehicles-toolbar .nation-tabs { container-type: inline-size; }
.vehicles-toolbar .nation-tab-flagged {
position: relative;
overflow: hidden;
width: 52px;
height: 32px;
padding: 0;
gap: 0;
background-color: #1a211d;
background-size: 152% 133%;
background-position: left top;
background-repeat: no-repeat;
border-radius: var(--radius-sm);
opacity: 1;
filter: saturate(0.9) brightness(1.06);
transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
/* Лёгкая тень у нижнего края — только чтобы счётчик читался поверх светлых
флагов; сам флаг она почти не приглушает. */
.vehicles-toolbar .nation-tab-flagged::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.2));
}
.vehicles-toolbar .nation-tab-flagged:hover { filter: none; transform: translateY(-1px); }
.vehicles-toolbar .nation-tab-flagged.active {
filter: none;
border-color: rgba(255, 201, 77, 0.75);
box-shadow: 0 0 0 2px rgba(255, 201, 77, 0.28);
}
.vehicles-toolbar .nation-tab-flagged .nation-tab-name {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.vehicles-toolbar .nation-tab-flagged .nation-tab-count {
position: absolute;
right: 2px;
bottom: 2px;
padding: 0 4px;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 10px;
line-height: 14px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}
.vehicles-toolbar .nation-tab-flagged.active .nation-tab-count { color: var(--accent); background: rgba(0, 0, 0, 0.6); }
/* Узкая панель (сайдбар рядом, планшет) — остаются одни флаги: счётчик всё
равно продублирован в заголовке нации над её карточками. */
@container (max-width: 820px) {
.vehicles-toolbar .nation-tab-flagged .nation-tab-count { display: none; }
}
@media (max-width: 720px) {
/* Поиск и вкладки наций остаются на экране при прокрутке — со справочником
в семьсот машин иначе приходится мотать вверх ради смены нации. */
.vehicles-toolbar {
position: sticky;
top: 0;
z-index: 20;
padding: 10px 12px 0;
/* Фон именно непрозрачный, без backdrop-filter: фильтр создал бы для
.vfilter-bar новый containing block, и шторка перестала бы быть fixed. */
background-color: rgb(13, 18, 15);
}
.vtool-label,
.vtool-row .sort-chips { display: none; }
.vfilter-btn {
position: relative;
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.04);
color: var(--muted);
cursor: pointer;
}
.vfilter-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.vfilter-btn.has-filters { color: var(--accent); border-color: rgba(255, 201, 77, 0.45); background: rgba(255, 201, 77, 0.10); }
.vfilter-badge {
position: absolute;
top: -5px;
right: -5px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 999px;
background: var(--accent);
color: var(--accent-ink);
font-size: 10.5px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
.vsearch input { height: 44px; padding: 0 12px 0 34px; }
/* Вкладки наций — сеткой 5×2 во всю ширину: прокручиваемая лента прятала
половину наций за краем экрана, а в свободные ряды они не помещались. */
.vehicles-toolbar .nation-tabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
margin: 8px 0 0;
padding: 0 0 10px;
}
.vehicles-toolbar .nation-tab { min-height: 34px; }
.vehicles-toolbar .nation-tab-all { justify-content: center; padding: 0 6px; font-size: 12.5px; }
.vehicles-toolbar .nation-tab-all .chip-full { display: none; }
.vehicles-toolbar .nation-tab-all .chip-short { display: inline; }
.vehicles-toolbar .nation-tab-flagged { width: auto; height: 34px; }
/* Фильтры — нижняя шторка */
.vfilter-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
display: block;
margin: 0;
padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
border: 0;
border-top: 1px solid var(--line);
border-radius: 12px 12px 0 0;
background: linear-gradient(180deg, #182019, #121814);
box-shadow: 0 -14px 36px rgba(0, 0, 0, 0.5);
transform: translateY(100%);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
max-height: 82vh;
overflow-y: auto;
}
.vfilter-bar::before {
content: '';
display: block;
width: 38px;
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
margin: 0 auto 12px;
}
body.vfilter-sheet-open .vfilter-bar { transform: translateY(0); }
.vfilter-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 59;
background: rgba(4, 7, 6, 0.6);
backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
body.vfilter-sheet-open .vfilter-scrim { opacity: 1; pointer-events: auto; }
body.vfilter-sheet-open { overflow: hidden; }
.vfilter-sheet-head {
display: flex;
align-items: center;
margin-bottom: 14px;
}
.vfilter-sheet-title { font-size: 16px; font-weight: 800; }
.vfilter-sheet-head .vfilter-reset { margin-left: auto; }
.vfilter-reset-inline { display: none; }
.vfilter-bar .filter-group { display: block; margin-bottom: 14px; }
.vfilter-bar .filter-group-label { display: block; margin-bottom: 7px; }
.vfilter-bar .filter-chip { min-height: 44px; }
.filter-chip-prem { width: 100%; justify-content: flex-start !important; padding: 0 12px; }
.filter-chip-prem-full { display: inline; }
.filter-chip-prem-short { display: none; }
.vfilter-apply {
display: block;
width: 100%;
height: 48px;
margin-top: 14px;
border: 0;
border-radius: var(--radius-sm);
background: var(--accent-grad);
color: var(--accent-ink);
font: inherit;
font-size: 14.5px;
font-weight: 800;
cursor: pointer;
}
}
@media (prefers-reduced-motion: reduce) {
.vfilter-bar, .vfilter-scrim { transition: none; }
}
.vehicle-section-head {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.vehicle-section-head .breakdown-title { margin: 0; }
.sort-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sort-chip {
padding: 6px 14px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
color: var(--muted);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: color 0.15s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.sort-chip:hover { color: var(--text); transform: translateY(-1px); }
.sort-chip.active { color: var(--accent-ink); background: var(--accent-grad); border-color: transparent; }
/* Паддинг/рамка живут на .filter-panel-inner, а не на .filter-panel — иначе
при max-height:0 рамка с паддингом всё равно занимает минимум места
(border-box не даёт им схлопнуться ниже своей суммы) и торчит полоской. */
.filter-panel {
margin-bottom: 6px;
transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.filter-panel-inner {
padding: 16px;
border-radius: var(--radius-sm);
background-color: rgba(18, 24, 20, 0.88);
background-image: var(--glass);
border: 1px solid var(--line-soft);
}
@media (prefers-reduced-motion: reduce) {
.filter-panel { transition: none; }
}
.filter-group { margin-bottom: 10px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group-label {
display: block;
font-size: 12.6px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 6px;
}
.filter-chip {
display: inline-flex;
align-items: center;
padding: 5px 13px;
margin: 0 6px 6px 0;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
color: var(--muted);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: color 0.15s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.filter-chip:hover { color: var(--text); transform: translateY(-1px); }
.filter-chip.active { color: var(--accent2-ink); background: var(--accent-grad); border-color: transparent; }
.vehicle-list {
display: flex;
flex-direction: column;
border-radius: var(--radius-sm);
background: var(--surface);
border: 1px solid var(--border);
overflow: hidden;
}
@keyframes rowFadeIn {
from { opacity: 0; transform: translateX(-6px); }
to { opacity: 1; transform: translateX(0); }
}
.vehicle-row {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) 52px 46px 56px 34px;
align-items: center;
gap: 6px 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
border-left: 2px solid transparent;
transition: background 0.15s ease, border-left-color 0.15s ease;
cursor: pointer;
}
@media (max-width: 480px) {
.vehicle-row { grid-template-columns: 26px minmax(0, 1fr) 44px 40px 34px; }
.vehicle-row .vehicle-stat-col:nth-child(5) { display: none; } /* прячем С/У на совсем узких экранах */
}
.vehicle-row-in { animation: rowFadeIn 0.4s ease both; animation-delay: var(--row-delay, 0ms); }
.vehicle-row:last-child { border-bottom: none; }
.vehicle-row:hover,
.vehicle-row:focus-visible { background: var(--surface-2); border-left-color: var(--accent); outline: none; }
.vehicle-row.mark-4 { border-left-color: rgba(242, 169, 59, 0.55); }
.vehicle-row.mark-some { border-left-color: rgba(242, 169, 59, 0.3); }
.vehicle-tier-pill {
display: flex;
align-items: center;
justify-content: center;
height: 22px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--line-soft);
font-size: 12px;
font-weight: 700;
color: var(--muted);
}
.vehicle-row-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.vehicle-name {
font-size: 15.5px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vehicle-sub {
font-size: 12.6px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vehicle-stat-col {
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1.2;
}
.vehicle-stat-col strong {
font-size: 15px;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.vehicle-stat-col small {
font-size: 10.4px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.vehicle-mark { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.vehicle-caret { color: var(--muted); font-size: 11.5px; }
.vehicle-row.is-expanded { background: var(--surface-2); border-left-color: var(--accent); }
/* Техника блоками по нациям, карточками */
.nation-section { margin-bottom: 26px; }
.nation-section:last-child { margin-bottom: 0; }
.nation-section-head {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: none;
background-image: repeating-linear-gradient(-45deg, var(--border) 0 6px, transparent 6px 12px);
background-repeat: repeat-x;
background-position: bottom;
background-size: 12px 2px;
}
.nation-flag { font-size: 18.4px; }
/* Круглая эмблема нации в заголовке секции */
.nation-badge {
width: 22px;
height: 22px;
object-fit: contain;
flex: none;
align-self: center;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}
.nation-title { font-size: 17.3px; font-weight: 700; }
.nation-count { font-size: 13.8px; color: var(--muted); }
.tank-card-grid {
display: grid;
/* Карточки компактные: в витрину нации и в общий список влезает заметно
больше машин, а всё нужное (уровень, силуэт, имя, класс) остаётся. */
grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
gap: 8px;
}
@keyframes cardFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.tank-card {
position: relative;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--line-soft);
border-radius: var(--radius-sm);
padding: 9px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
animation: cardFadeIn 0.35s ease both;
animation-delay: var(--card-delay, 0ms);
}
.tank-card:hover,
.tank-card:focus-visible {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 201, 77, 0.35);
transform: translateY(-3px);
box-shadow: var(--shadow-2);
outline: none;
}
.tank-card:hover .tank-card-image img { transform: scale(1.06); }
.tank-card-image img { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
.tank-card { animation: none; }
}
.tank-card-tier {
position: absolute;
top: 6px;
left: 6px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 6px;
border-radius: var(--radius-pill);
background: rgba(0, 0, 0, 0.45);
border: 1px solid var(--line);
font-size: 11.5px;
font-weight: 700;
color: var(--text-dim);
}
/* Премиум и коллекционная техника — уровень и название в цвет подсветки
(классы вешает public/tankRarity.js, токены — выше в этом файле). */
.tank-card.tank-rare .tank-card-tier,
.tank-card.tank-rare .tank-card-name { color: var(--tank-rarity); }
/* Отступ сверху — под бейдж уровня (top:8 + высота 20 при padding карточки
12px): без него силуэт танка наезжал на римскую цифру. Снизу, наоборот,
поджимаем — название должно читаться как подпись к картинке. */
.tank-card-image {
height: 56px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 14px;
margin-bottom: 2px;
}
.tank-card-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tank-card-name {
font-size: 13.2px;
font-weight: 700;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 27px;
}
/* Танки, скрытые самой Lesta (узел дерева прокачки есть, карточки с ттх — нет) */
.tank-card-hidden { border-style: dashed; opacity: 0.75; }
.tank-card-hidden:hover, .tank-card-hidden:focus-visible { opacity: 1; }
.tank-card-image-empty {
height: 56px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2px;
font-size: 27.6px;
color: var(--muted);
background: var(--surface-2);
}
.tank-card-no-data {
font-size: 10.9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.02em;
margin-top: 2px;
}
.modal-hidden-note {
font-size: 15px;
color: var(--muted);
line-height: 1.6;
padding: 14px;
background: var(--surface-2);
border: 1px dashed var(--border);
}
.tank-card-type {
display: flex;
align-items: center;
font-size: 11.3px;
color: var(--muted);
margin: 2px 0 8px;
}
/* Геометрические маркеры вместо эмодзи-иконок: классы техники, премиум-ромб,
значок сравнения на кнопках — все монохромные, заливка через currentColor. */
.type-icon {
width: 11px;
height: 11px;
fill: currentColor;
margin-right: 5px;
flex-shrink: 0;
}
.premium-icon {
width: 14px;
height: 14px;
fill: currentColor;
display: inline-block;
vertical-align: -2px;
}
.btn-icon {
width: 13px;
height: 13px;
fill: currentColor;
display: inline-block;
vertical-align: -2px;
margin-right: 2px;
}
/* Модалка карточки техники: графические полосы вместо голого текста + сравнение */
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPanelIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(4, 7, 6, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 40px 16px;
overflow-y: auto;
animation: modalFadeIn 0.18s ease both;
}
.modal-panel {
position: relative;
width: 100%;
max-width: 640px;
background: linear-gradient(180deg, #182019, #121814);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-2);
padding: 24px;
animation: modalPanelIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
.modal-overlay, .modal-panel { animation: none; }
}
.modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--line);
color: var(--muted);
cursor: pointer;
font-size: 14px;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.modal-close:hover { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.modal-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.modal-head-image { width: 88px; height: 60px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.modal-head-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.modal-head-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.modal-tier { position: static; width: fit-content; }
.modal-title { margin: 0; font-size: 19.5px; }
.modal-sub { display: flex; align-items: center; font-size: 13.8px; color: var(--muted); }
.compare-clear-btn {
margin-left: auto;
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--muted);
font-size: 13.2px;
padding: 6px 10px;
cursor: pointer;
}
.compare-clear-btn:hover { color: var(--text); border-color: var(--accent); }
.modal-stats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.stat-bar-row { display: grid; grid-template-columns: 110px 1fr 60px; align-items: center; gap: 8px; font-size: 13.8px; }
.stat-bar-label { color: var(--muted); }
.stat-bar-track { height: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.stat-bar-fill { height: 100%; background: var(--accent); transition: width 0.3s ease; }
.stat-bar-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.compare-open-btn {
width: 100%;
padding: 10px;
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text);
font-size: 14.4px;
font-weight: 600;
cursor: pointer;
margin-top: 4px;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.compare-open-btn:hover { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.compare-picker { margin-top: 10px; }
.compare-picker-list {
max-height: 220px;
overflow-y: auto;
border: 1px solid var(--border);
margin-top: 8px;
}
.compare-picker-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
font-size: 14.4px;
cursor: pointer;
border-bottom: 1px solid var(--border);
}
.compare-picker-item:last-child { border-bottom: none; }
.compare-picker-item:hover { background: var(--surface-2); }
.compare-picker-item span {
min-width: 18px;
text-align: center;
font-size: 12.1px;
color: var(--muted);
font-weight: 700;
}
.compare-picker-item small { margin-left: auto; color: var(--muted); }
.compare-heads {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 16px;
}
.compare-head-side { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; width: 130px; }
.compare-head-image { width: 100px; height: 64px; display: flex; align-items: center; justify-content: center; }
.compare-head-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.compare-head-side strong { font-size: 14.4px; line-height: 1.25; }
.compare-head-side span { font-size: 12.6px; color: var(--muted); }
.compare-vs { font-size: 15px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.cmp-bar-row { display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; gap: 8px; font-size: 13.8px; }
/* Цифры по умолчанию белые — красим только сторону, которая выигрывает по параметру,
иначе непонятно, "оранжевый = танк А" или "оранжевый = танк А тут лучше". */
.cmp-bar-value { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); transition: color 0.15s ease; }
.cmp-a { text-align: right; }
.cmp-b { text-align: left; }
.cmp-bar-value.cmp-best { color: var(--accent); }
.cmp-bar-mid { display: flex; flex-direction: column; gap: 3px; }
.cmp-bar-label { font-size: 11.5px; color: var(--muted); text-align: center; }
.cmp-bar-track {
display: flex;
height: 8px;
background: var(--surface-2);
border: 1px solid var(--border);
}
.cmp-bar-half { flex: 1 1 50%; display: flex; min-width: 0; }
.cmp-bar-half-left { justify-content: flex-end; }
.cmp-bar-half-right { justify-content: flex-start; }
.cmp-bar-fill { height: 100%; transition: width 0.3s ease; }
.cmp-fill-a { background: var(--accent); }
.cmp-fill-b { background: #4FC3F7; }
/* Сравнение 3+ танков — колонки вместо полосок */
.cmp-cols-wrap { margin-bottom: 14px; }
.cmp-cols-scroll { overflow-x: auto; }
.cmp-cols-head, .cmp-col-row {
display: grid;
align-items: center;
gap: 6px;
min-width: max-content;
}
.cmp-cols-head { padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.cmp-col-head {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 2px;
min-width: 90px;
}
.cmp-col-remove {
position: absolute;
top: -6px;
right: 4px;
width: 18px;
height: 18px;
border-radius: var(--radius-sm);
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--muted);
font-size: 11.5px;
line-height: 1;
cursor: pointer;
}
.cmp-col-remove:hover { color: var(--text); border-color: var(--accent); }
.cmp-col-image { width: 72px; height: 48px; display: flex; align-items: center; justify-content: center; }
.cmp-col-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cmp-col-head strong { font-size: 13.2px; line-height: 1.25; }
.cmp-col-head span { font-size: 12.1px; color: var(--muted); }
.cmp-col-row {
padding: 7px 0;
border-bottom: 1px dashed var(--border);
font-size: 13.8px;
}
.cmp-col-row:last-child { border-bottom: none; }
.cmp-col-label { color: var(--muted); white-space: nowrap; }
.cmp-col-value {
text-align: center;
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--text);
min-width: 90px;
}
.cmp-col-value.cmp-best { color: var(--accent); }
/* Выпадающая карточка статистики по одному танку — раскрывается прямо в списке */
@keyframes tankDetailIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.tank-detail {
padding: 16px;
background: rgba(255, 255, 255, 0.02);
border-bottom: 1px solid var(--border);
border-left: 2px solid var(--accent);
animation: tankDetailIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tank-detail-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.tank-detail-mark {
display: flex;
align-items: center;
gap: 8px;
font-size: 14.4px;
color: var(--muted);
}
.tank-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 8px;
}
/* Плитка «подпись сверху — значение снизу»: длинные названия характеристик
(«Броня корпуса (лоб/борт/корма)») больше не сталкиваются со значениями */
.tank-detail-item {
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px 12px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--line-soft);
font-size: 14px;
}
.tank-detail-item span { color: var(--text-faint); font-size: 11.5px; line-height: 1.35; }
.tank-detail-item strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.tank-detail-item strong span { color: var(--muted); font-weight: 400; font-size: inherit; }
.tank-detail-hint { margin: 12px 0 0; }
@media (prefers-reduced-motion: reduce) {
.tank-detail { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.vehicle-row-in { animation: none; }
}
/* Разбивка по уровням/классам техники — простой список строк, читается
сверху вниз глазами; никакого стекла/свечения/сетки — это отвлекало
от самих цифр, которые тут главное. */
.breakdown-panels {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 14px;
}
@media (max-width: 900px) {
.breakdown-panels { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.breakdown-panels { grid-template-columns: 1fr; gap: 20px; }
}
.breakdown-panel { }
.breakdown-title {
font-size: 12.6px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
margin-bottom: 12px;
}
.stat-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.stat-row {
--row-accent: var(--accent2);
}
.stat-row.bar-battles { --row-accent: var(--accent2); }
.stat-row.bar-winrate { --row-accent: #4fd18b; }
.stat-row.bar-damage { --row-accent: #a78bf0; }
.stat-row-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 5px;
}
.stat-tile-label {
font-size: 15px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stat-tile-value {
font-family: "Inter", sans-serif;
font-size: 19px;
font-weight: 800;
letter-spacing: 0.02em;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.stat-tile-track {
height: 4px;
border-radius: var(--radius-sm);
background: var(--surface-2);
overflow: hidden;
}
.stat-tile-fill {
height: 100%;
width: 0;
border-radius: var(--radius-sm);
background: var(--row-accent);
transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Лидер (максимум по метрике) — просто крупнее и цветом, без рамок и свечения */
.stat-row.is-leader .stat-tile-label { color: var(--text); }
.stat-row.is-leader .stat-tile-value { color: var(--row-accent); font-size: 19px; }
/* Бакет "Неизвестно" (танки, удалённые Lesta из справочника) — приглушаем,
чтобы не спорил визуально с реальными уровнями/классами, но не пропадал. */
.stat-row.is-unknown { opacity: 0.55; }
.stat-row.is-unknown .stat-tile-fill { background: var(--muted); }
@media (prefers-reduced-motion: reduce) {
.stat-tile-fill { transition: none; }
}
/* Переключатель метрики (Бои / Победы % / Урон за бой) над блоком "Подробнее" */
.metric-toggle-row {
display: flex;
gap: 8px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.metric-toggle {
padding: 7px 16px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
color: var(--muted);
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: color 0.15s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.metric-toggle:hover { color: var(--text); transform: translateY(-1px); }
.metric-toggle.active { color: var(--accent-ink); background: var(--accent-grad); border-color: transparent; }
@media (prefers-reduced-motion: reduce) {
.sort-chip, .filter-chip, .metric-toggle { transition: none; }
}
/* Сортировка колонок таблицы техники */
.sortable-table th[data-sort] {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.sortable-table th[data-sort]:hover { color: var(--text); }
.tanks-box { margin-top: 18px; }
.tanks-table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
font-size: 15px;
}
.tanks-table th,
.tanks-table td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--border);
}
.tanks-table th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 12.6px; letter-spacing: 0.04em; }
/* Премиум и коллекционная техника — уровень и название в цвет подсветки */
.tanks-table tr.tank-rare td.mtier,
.tanks-table tr.tank-rare td.mname { color: var(--tank-rarity); }
.tanks-table tbody tr:last-child td { border-bottom: none; }
.tanks-table tbody tr:hover { background: var(--surface-2); }
.mark-dot {
display: inline-block;
width: 8px;
height: 8px;
margin-right: 3px;
border-radius: var(--radius-sm);
background: var(--border-strong);
}
.mark-dot.filled { background: var(--accent2); }
@keyframes masterGlow {
0%, 100% { text-shadow: none; }
50% { text-shadow: none; }
}
.mark-master { color: var(--accent); margin-left: 4px; display: inline-block; animation: masterGlow 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.mark-master { animation: none; }
}
.player-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 18px;
}
@media (max-width: 560px) {
.player-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.player-stat-card {
padding: 14px 16px;
border-radius: var(--radius-sm);
background: var(--surface);
border: 1px solid var(--border);
text-align: center;
}
.player-stat-value {
font-family: "Inter", sans-serif;
font-size: 26px;
font-weight: 800;
letter-spacing: 0.02em;
color: var(--accent);
}
.player-stat-label {
margin-top: 4px;
font-size: 12.6px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.tanks-toolbar {
display: flex;
gap: 10px;
margin-bottom: 12px;
flex-wrap: wrap;
}
/* Отметки — фильтры и таблица порогов */
.layout-wide { max-width: 1180px; }
.marks-filters {
display: flex;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.marks-input,
.marks-select,
.tanks-toolbar input {
padding: 10px 16px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
color: var(--text);
font-size: 14px;
font-family: inherit;
transition: border-color 0.15s ease, background 0.15s ease;
}
.marks-input { flex: 1; min-width: 180px; }
.marks-input:focus,
.marks-select:focus,
.tanks-toolbar input:focus { outline: none; border-color: rgba(255, 201, 77, 0.5); background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 3px rgba(255, 201, 77, 0.12); }
.marks-table-wrap { overflow-x: auto; }
/* Урон в таблице отметок — справочная колонка: степень даётся за опыт, а не за урон */
.marks-table .mdim { color: var(--muted); }
/* Рейтинг кланов: итоговый балл — главное число строки, состав раскрывается
прямо в таблице отдельной строкой на всю ширину. */
.clan-score {
font-weight: 700;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.clan-rating-row[aria-expanded='true'] { background: rgba(255, 201, 77, 0.07); }
.clan-detail-row > td {
padding: 16px;
background: rgba(0, 0, 0, 0.22);
border-bottom: 1px solid var(--line);
}
/* Монограмма клана вместо эмблемы: оттенок --h приходит из тега, поэтому клан
выглядит одинаково в рейтинге, поиске и на своей странице. */
.clan-mono {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: none;
border-radius: 8px;
font-family: "Oswald", "Inter", sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.01em;
background: linear-gradient(145deg, hsl(var(--h) 42% 27%), hsl(var(--h) 46% 15%));
border: 1px solid hsl(var(--h) 45% 45% / 0.45);
color: hsl(var(--h) 65% 80%);
}
.clan-mono--card { width: 40px; height: 40px; border-radius: 10px; font-size: 16px; }
.clan-cell { display: inline-flex; align-items: center; gap: 11px; }
.clan-cell-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.clan-cell-tag {
display: flex;
align-items: baseline;
gap: 7px;
min-width: 0;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
}
/* Балл в таблице: число плюс тонкая шкала до 100 — сравнивать строки глазами
заметно легче, чем по одним цифрам. */
.clan-score-bar {
display: block;
width: 62px;
height: 4px;
margin-top: 5px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.clan-score-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent-grad, var(--accent)); }
/* Телефон: таблицы рейтингов ужимаем, чтобы на узком экране влезало больше
колонок без горизонтальной прокрутки — компактнее паддинги и шрифт, уже
колонка клана (название под тегом убираем — тег и так уникален), шкала
балла и монограмма не нужны. Скролл при этом остаётся как запасной вариант. */
@media (max-width: 640px) {
.players-table { min-width: 0; }
.players-table th { padding: 9px 6px; font-size: 10px; letter-spacing: 0.04em; }
.players-table td { padding: 8px 6px; font-size: 12.5px; }
.players-table-rank-col { width: 30px; }
.rank-top { font-size: 17px; }
.clan-mono { display: none; }
.clan-cell { gap: 0; }
.clan-cell .players-table-clan { display: none; }
.clan-score-bar { display: none; }
.clan-detail-row > td { padding: 10px 8px; }
.sort-arrow { margin-left: 2px; }
.players-table th { white-space: nowrap; }
.th-full { display: none; }
/* Длинный ник не должен выталкивать числовые колонки за край экрана */
.players-table-nick { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Короткие подписи колонок показываем только на телефоне */
.th-short { display: none; }
@media (max-width: 640px) { .th-short { display: inline; } }
/* Топ-3 в рейтинге: без медалей и кружков — крупный номер в Oswald с
металлическим градиентом на самом тексте (золото / сталь / бронза) и
акцентная кромка ряда того же металла. Строгий «армейский» ранг, а не значок. */
.rank-top {
display: inline-block;
font-family: "Oswald", "Inter", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.01em;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.rank-top--1 { background-image: linear-gradient(180deg, #fff1bd 0%, #ffd15a 45%, #c98d14 100%); filter: drop-shadow(0 0 6px rgba(255, 201, 77, 0.35)); }
.rank-top--2 { background-image: linear-gradient(180deg, #ffffff 0%, #d5dde6 45%, #8e9aa9 100%); filter: drop-shadow(0 0 5px rgba(200, 210, 222, 0.25)); }
.rank-top--3 { background-image: linear-gradient(180deg, #f6c99f 0%, #d9904f 45%, #8f5220 100%); filter: drop-shadow(0 0 5px rgba(217, 144, 79, 0.25)); }
/* Кромка ряда топ-3: полоска металла слева плюс лёгкое свечение,
затухающее вправо — ряд читается «премиальным» без лишних деталей. */
.clan-row--top td:first-child {
box-shadow: inset 3px 0 0 var(--rank-c);
background: linear-gradient(90deg, color-mix(in srgb, var(--rank-c) 14%, transparent), transparent 80%);
}
.clan-row--top1 { --rank-c: #ffc94d; }
.clan-row--top2 { --rank-c: #c3ccd7; }
.clan-row--top3 { --rank-c: #d08b4c; }
/* ---- Рейтинг кланов: панель поиска и фильтров ---------------------------- */
.clans-hero-meta {
margin-top: 8px;
font-size: 13px;
color: var(--text-faint);
}
.clans-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.clans-search {
display: flex;
align-items: center;
gap: 9px;
flex: 1;
min-width: 260px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.clans-search:focus-within {
border-color: rgba(255, 201, 77, 0.5);
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 0 0 3px rgba(255, 201, 77, 0.12);
}
.clans-search-icon { color: var(--text-faint); }
.clans-search input {
flex: 1;
min-width: 0;
border: 0;
background: none;
color: var(--text);
font: 400 13.5px/1.2 Inter, sans-serif;
}
.clans-search input::placeholder { color: var(--text-faint); }
.clans-search input:focus { outline: none; }
/* wrap обязателен: в составе клана этих кнопок четыре, и в строку рядом с
заголовком «Состав · N бойцов» они не встают — вылезали за край экрана и
растягивали всю страницу по горизонтали. */
.clans-filters { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.clans-filters[hidden] { display: none; }
/* На широком экране фильтры живут у заголовка, на телефоне — первыми в ленте
чипов сортировки. Разметка есть в обоих местах, видно всегда одну. */
.clans-filters--bar { display: none; }
.clans-filter {
padding: 9px 15px;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.04);
color: var(--text-dim);
font: 600 12.5px Inter, sans-serif;
cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.clans-filter:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); }
.clans-filter.is-active {
color: var(--accent-ink);
background: var(--accent-grad);
border-color: transparent;
}
/* ---- Рейтинг кланов: таблица --------------------------------------------
Не <table>, а грид: в строке живут шкала балла и полоса активности, которым
нужна своя внутренняя раскладка, а на телефоне те же строки разворачиваются
в карточки — с ячейками таблицы это стоило бы дублирования разметки. */
.clan-grid,
.clan-own-pin {
/* Закреплённая строка живёт вне сетки (overflow:hidden ломает position:sticky),
поэтому раскладку колонок держим на обоих контейнерах. */
--clan-cols: 40px minmax(0, 1fr) 132px 76px 76px 70px 58px 74px;
}
.clan-grid {
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: var(--radius);
overflow: hidden;
position: relative;
}
.clan-grid-head,
.clan-grid-row {
display: grid;
grid-template-columns: var(--clan-cols);
align-items: center;
gap: 0 8px;
}
.clan-grid-head {
padding: 12px 18px;
font: 700 10px Inter, sans-serif;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-faint);
background: rgba(255, 255, 255, 0.025);
border-bottom: 1px solid var(--line-soft);
}
.clan-grid-head .clan-sort-th { cursor: pointer; user-select: none; }
.clan-grid-head .clan-sort-th:hover { color: var(--text-dim); }
.clan-grid-head .sort-active { color: var(--accent); }
.clan-grid-row {
padding: 12px 18px;
border-bottom: 1px solid var(--line-soft);
cursor: pointer;
transition: background 0.15s;
}
.clan-grid-row:hover { background: rgba(255, 201, 77, 0.05); }
.clan-grid-row:last-child { border-bottom: 0; }
.clan-grid-row--asleep { opacity: 0.55; }
.clan-col-rank { font: 700 14px Inter, sans-serif; color: var(--text-dim); }
.clan-col-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.clan-col-num { font: 600 13.5px Inter, sans-serif; color: var(--text); font-variant-numeric: tabular-nums; }
.clan-col-battles { color: var(--text-dim); }
/* Число бойцов живёт только в мобильной карточке — в таблице для него нет
колонки, а состав всё равно открывается на странице клана. */
.clan-col-members { display: none; }
.clan-cell-name {
font: 12.5px Inter, sans-serif;
color: var(--text-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.clan-own-badge,
.clan-asleep-badge {
flex: none;
font: 600 9px Inter, sans-serif;
font-style: normal;
letter-spacing: 0.11em;
text-transform: uppercase;
vertical-align: middle;
}
.clan-own-badge { color: var(--cyan); }
.clan-asleep-badge { color: #d8a748; }
/* Балл: число + словесная оценка, под ними десять делений. Слово снимает
необходимость держать шкалу в голове, деления дают сравнение боковым зрением. */
.clan-col-score { display: flex; flex-direction: column; gap: 5px; padding-right: 10px; }
.clan-score-head { display: flex; align-items: baseline; gap: 8px; }
.clan-col-score .clan-score { font: 700 18px Oswald, sans-serif; }
/* Двойной селектор намеренно: .power-tier--N с фоном чипа объявлен ниже по
файлу, а в строке рейтинга оценка должна быть просто цветным словом. */
.clan-grid-row .clan-score-tier {
padding: 0;
background: none;
border: 0;
font: 600 10px Inter, sans-serif;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.clan-seg { display: flex; gap: 2px; }
.clan-seg > i { flex: 1; height: 5px; background: rgba(255, 255, 255, 0.10); }
.clan-seg > i.is-on { background: var(--accent); }
.clan-seg > i.is-half { background: rgba(255, 201, 77, 0.5); }
.clan-seg--own > i.is-on { background: var(--cyan); }
.clan-seg--own > i.is-half { background: rgba(73, 243, 214, 0.45); }
.clan-col-active { display: flex; align-items: center; gap: 7px; }
/* Движение места за месяц: спарклайн по ряду из clan_rank_history плюс дельта
числом. Плюс — подъём (номер места стал меньше). */
.clan-col-delta { display: flex; align-items: center; gap: 7px; }
/* Временная сноска: висит, только пока ряд мест короче месяца и колонка Δ
стоит пустой. Накопится история — пропадёт сама. */
.clan-history-note {
margin: 10px 0 0;
font-size: 12px;
line-height: 1.5;
color: var(--text-faint);
}
.clan-spark { flex: none; }
.clan-delta-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.15; min-width: 0; }
.clan-delta-top { display: flex; align-items: center; gap: 7px; }
/* Суточная дельта: стрелка направления и число, без слов. Стрелка — рамка,
а не символ шрифта: у ▲ и ▼ разная оптическая высота, и строка «прыгала». */
.clan-delta-day {
display: inline-flex;
align-items: center;
gap: 3px;
font: 700 9.5px Inter, sans-serif;
white-space: nowrap;
}
.clan-delta-arrow {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.clan-delta-day.is-up .clan-delta-arrow { border-bottom: 4.5px solid currentColor; }
.clan-delta-day.is-down .clan-delta-arrow { border-top: 4.5px solid currentColor; }
.clan-delta-day.is-flat .clan-delta-arrow { display: none; }
.clan-delta-day.is-up { color: #4dd67a; }
.clan-delta-day.is-down { color: #ff8f8f; }
.clan-delta-day.is-flat { color: var(--text-faint); }
.clan-delta { font: 700 12px Inter, sans-serif; }
.clan-delta.is-up { color: #4dd67a; }
.clan-delta.is-down { color: #ff8f8f; }
.clan-delta.is-flat { color: var(--text-faint); }
.clan-delta-empty { color: var(--text-faint); }
.clan-active-bar {
width: 40px;
height: 5px;
flex: none;
border-radius: 999px;
background: rgba(255, 255, 255, 0.10);
overflow: hidden;
}
.clan-active-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #3fbf6a, #63dd8d); }
.clan-active-bar.is-low > i { background: #d8a748; }
.clan-active-num { font: 12px Inter, sans-serif; color: var(--text-dim); }
.clan-active-num.is-low { color: #d8a748; }
/* Топ-3: металлический номер и кромка ряда того же металла. */
.clan-rank-metal {
display: inline-block;
font: 700 22px/1 Oswald, sans-serif;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.clan-rank-metal--1 { background-image: linear-gradient(180deg, #fff1bd, #ffd15a 45%, #c98d14); }
.clan-rank-metal--2 { background-image: linear-gradient(180deg, #fff, #d5dde6 45%, #8e9aa9); }
.clan-rank-metal--3 { background-image: linear-gradient(180deg, #f6c99f, #d9904f 45%, #8f5220); }
.clan-grid-row--top {
box-shadow: inset 3px 0 0 var(--rank-c);
background: linear-gradient(90deg, color-mix(in srgb, var(--rank-c) 11%, transparent), transparent 70%);
}
.clan-grid-row--top:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--rank-c) 18%, transparent), transparent 70%); }
.clan-grid-row--top1 { --rank-c: #ffc94d; }
.clan-grid-row--top2 { --rank-c: #c3ccd7; }
.clan-grid-row--top3 { --rank-c: #d08b4c; }
/* Свой клан закреплён у нижнего края: в топ-100 он попадает редко, а страница
для вошедшего игрока прежде всего про «где я и сколько до соседа». */
.clan-own-pin {
position: sticky;
bottom: 0;
z-index: 2;
margin-top: -1px;
border: 1px solid rgba(73, 243, 214, 0.35);
border-radius: 0 0 var(--radius) var(--radius);
overflow: hidden;
box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.5);
}
.clan-grid-row--own {
box-shadow: inset 3px 0 0 var(--cyan);
background: linear-gradient(90deg, rgba(73, 243, 214, 0.12), rgba(73, 243, 214, 0.03) 70%), var(--surface);
border-bottom: 0;
}
.clan-grid-row--own:hover { background: linear-gradient(90deg, rgba(73, 243, 214, 0.18), rgba(73, 243, 214, 0.04) 70%), var(--surface); }
.clan-grid-row--own .clan-col-rank { font: 700 16px Oswald, sans-serif; color: var(--cyan); }
.clan-grid-row--own .clan-score { color: var(--cyan); }
.clan-mono--own {
background: var(--cyan);
border-color: var(--cyan);
color: #0a2e28;
}
/* Одна строка с разрывом до соседа сверху. Кнопки рядом больше нет: она не
влезала в строку, переносилась под текст и удваивала высоту подвала —
а переход в профиль даёт сама карточка. */
.clan-own-foot {
padding: 7px 18px;
background: linear-gradient(90deg, rgba(73, 243, 214, 0.07), rgba(73, 243, 214, 0.02)), var(--surface);
font: 12.5px/1.35 Inter, sans-serif;
color: var(--text-faint);
}
.clan-own-foot b { color: var(--text); }
/* Клан у игрока есть, но в пересчёт он ещё не попал — вместо закреплённой
карточки короткое объяснение, почему его нет в списке. */
.clan-own-note {
margin-top: 10px;
padding: 11px 16px;
border: 1px solid rgba(73, 243, 214, 0.28);
border-left-width: 3px;
border-radius: var(--radius-sm);
background: linear-gradient(90deg, rgba(73, 243, 214, 0.07), rgba(73, 243, 214, 0.02)), var(--surface);
font: 12.5px/1.45 Inter, sans-serif;
color: var(--text-dim);
}
.clan-own-note b { color: var(--cyan); }
/* Узкий экран: первой уходит самая справочная колонка, а не балл. Порог взят
по ширине колонки ленты (сайдбар отъедает 328 px), а не по «планшету». */
@media (max-width: 1100px) {
.clan-grid,
.clan-own-pin { --clan-cols: 38px minmax(0, 1fr) 126px 74px 74px 68px 72px; }
.clan-col-battles { display: none; }
}
/* ---- Полоса сортировки (только телефон) ---------------------------------
На телефоне шапки таблицы нет, а сортировка — главное, зачем в рейтинг
заходят с телефона. Полоса липнет под шапкой сайта, повторный тап по
активному критерию переворачивает порядок. */
.clan-sortbar { display: none; }
.clan-sortbar-chips {
display: flex;
gap: 7px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.clan-sortbar-chips::-webkit-scrollbar { display: none; }
.clan-sortchip {
display: inline-flex;
align-items: center;
gap: 5px;
flex: none;
/* 38px — компромисс: тач-таргет остаётся удобным, но семь чипов перестают
упираться друг в друга и уезжать за край на узком экране. */
height: 38px;
padding: 0 11px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.05);
color: var(--text-dim);
font: 600 12.5px Inter, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.clan-sortchip.is-active {
font-weight: 700;
color: var(--accent-ink);
background: var(--accent-grad);
border-color: transparent;
}
.clan-sortchip i { font-style: normal; font-size: 11px; }
.clan-sortbar-hint {
padding-top: 8px;
font: 11.5px Inter, sans-serif;
color: var(--text-faint);
}
/* Кнопки под списком: порционная подгрузка и прыжок к своему клану. */
.clan-list-actions { display: flex; gap: 8px; margin-top: 10px; }
.clan-more-btn,
.clan-jump-btn {
padding: 12px 15px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.04);
color: var(--text-dim);
font: 600 13px Inter, sans-serif;
cursor: pointer;
}
.clan-more-btn { flex: 1; }
.clan-more-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); }
.clan-jump-btn {
flex: none;
color: var(--cyan);
background: rgba(73, 243, 214, 0.08);
border-color: rgba(73, 243, 214, 0.28);
}
/* Оценка силы живёт в двух местах: у балла (десктоп) и под названием клана
(телефон). Показываем ровно одну из копий. Двойной селектор — чтобы перебить
фон чипа .power-tier--N, объявленный ниже по файлу. */
.clan-grid-row .clan-tier-inline {
display: none;
padding: 0;
background: none;
border: 0;
font: 600 9.5px Inter, sans-serif;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Дальше ужимать колонки некуда — строки разворачиваются отдельными карточками
(макет 3a): номер и название сверху, балл справа, под ними шкала и строка
чисел с подписями, которые на десктопе давала шапка. */
@media (max-width: 900px) {
.clan-grid-head { display: none; }
.clan-sortbar {
display: block;
position: sticky;
top: var(--site-header-h, 0px);
z-index: 5;
margin: 0 -16px;
padding: 10px 16px 9px;
background: rgba(11, 16, 13, 0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.clan-grid {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
border: 0;
border-radius: 0;
overflow: visible;
}
.clan-grid-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px 12px;
padding: 12px 13px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
}
.clan-col-rank { flex: 0 0 24px; text-align: center; order: 1; }
.clan-col-name { flex: 1 1 0; gap: 10px; order: 2; }
.clan-col-delta { order: 4; flex: none; gap: 5px; }
.clan-col-num,
.clan-col-active { order: 6; }
/* Старая табличная мобилка прятала эмблему ради колонок — в карточке место
для неё есть, и клан по ней опознаётся быстрее, чем по тексту. */
.clan-grid-row .clan-mono { display: inline-flex; width: 32px; height: 32px; border-radius: 7px; }
.clan-cell-text { flex-direction: row; flex-wrap: wrap; column-gap: 6px; row-gap: 2px; }
.clan-cell-tag { overflow: visible; }
.clan-cell-name { flex: 1 1 auto; font-size: 13.5px; color: var(--text); }
.clan-grid-row .clan-tier-inline { display: block; flex: 1 0 100%; }
/* Ячейка балла раскрывается в поток карточки: число уходит вправо в первую
строку, шкала занимает всю ширину во второй. */
.clan-col-score { display: contents; }
.clan-score-head {
flex: none;
flex-direction: column;
align-items: flex-end;
gap: 1px;
order: 3;
}
.clan-col-score .clan-score { font-size: 19px; font-variant-numeric: tabular-nums; }
.clan-grid-row .clan-score-tier { display: none; }
.clan-seg { flex: 1 0 100%; gap: 3px; order: 5; }
.clan-seg > i { height: 6px; border-radius: 1px; }
/* Показатели набраны мельче, чем остальная карточка: их четыре пары
«подпись + число», и на 375px они иначе не встают в две строки. */
.clan-col-num,
.clan-col-active {
display: flex;
align-items: center;
gap: 4px;
flex: none;
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.clan-col-num::before,
.clan-col-active::before {
font: 400 10.5px Inter, sans-serif;
color: var(--text-dim);
}
.clan-grid-row > .clan-col-num:nth-of-type(5)::before { content: 'урон'; }
.clan-grid-row > .clan-col-num:nth-of-type(6)::before { content: 'победы'; }
.clan-grid-row > .clan-col-battles::before { content: 'ср. бои'; }
.clan-col-members::before { content: 'бойцов'; }
.clan-col-active::before { content: 'актив'; }
.clan-col-active { gap: 6px; }
/* Бои и число бойцов показываем и здесь: правила идут после общего
display:flex, иначе display:none выше их бы не пустил. */
.clan-col-battles,
.clan-col-members { display: flex; order: 6; }
.clan-col-active .clan-active-bar { width: 40px; }
.clan-grid-row--top { background: var(--surface); }
.clan-grid-row--top:hover { background: var(--surface); }
.clan-grid-row--top1 { border-color: rgba(255, 201, 77, 0.25); }
.clan-rank-metal { font-size: 21px; }
/* Закреплённая карточка своего клана: та же карточка, но бирюзовая и с
запасом под домашний индикатор iPhone. */
.clan-own-pin {
margin: 8px 0 0;
/* Липнет над нижним таб-баром, а не под ним: с bottom:0 бар накрывал
нижнюю треть карточки вместе со строкой разрыва. */
bottom: var(--bottom-tabs-h, 0px);
border-radius: var(--radius);
border-color: rgba(73, 243, 214, 0.35);
}
/* Закреплённая карточка висит поверх списка постоянно, поэтому в ней
оставляем только опознавательные данные и балл: шкала и четыре пары
мелких цифр забирали треть экрана ради того, что и так есть в строке
своего клана внутри списка. */
.clan-own-pin .clan-seg,
.clan-own-pin .clan-col-battles,
.clan-own-pin .clan-col-members,
.clan-own-pin .clan-col-active,
.clan-own-pin .clan-tier-inline { display: none; }
.clan-own-pin .clan-grid-row {
gap: 6px 10px;
padding: 9px 12px;
}
/* Перенос строки вместо убранной шкалы: в карточке она занимала всю ширину
и заодно разбивала строки, поэтому без неё урон и победы уезжали наверх,
к тегу и баллу, и налезали на них. Пустой элемент нулевой высоты держит
разрыв на том же месте (order между баллом и цифрами). */
.clan-own-pin .clan-grid-row::after {
content: '';
flex: 1 0 100%;
order: 5;
height: 0;
}
.clan-grid-row--own {
border-color: transparent;
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
/* Запас под домашний индикатор держит уже таб-бар — второй раз он не нужен. */
.clan-own-pin .clan-grid-row--own { padding-bottom: 9px; }
.clan-own-foot { padding: 7px 13px; font-size: 11.5px; }
.clan-own-pin .clan-own-foot { padding: 6px 12px; font-size: 11px; }
}
/* Страница клана. Двойной класс намеренно: profile.css подключается после
style.css, и при равной специфичности его .profile-avatar перебил бы фон. */
.profile-avatar.clan-avatar {
font-size: 24px;
letter-spacing: 0.02em;
color: hsl(var(--h) 70% 86%);
background: linear-gradient(145deg, hsl(var(--h) 45% 34%), hsl(var(--h) 50% 18%));
box-shadow: 0 8px 26px hsl(var(--h) 50% 12% / 0.6), inset 0 1px 0 hsl(var(--h) 60% 70% / 0.35);
}
.clan-rank-chip {
padding: 4px 11px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 700;
color: var(--accent);
background: rgba(255, 201, 77, 0.12);
border: 1px solid rgba(255, 201, 77, 0.35);
white-space: nowrap;
}
.clan-rank-chip--dead {
color: #ff8f8f;
background: rgba(255, 90, 90, 0.12);
border-color: rgba(255, 90, 90, 0.35);
}
/* Кружок-медаль внутри чипа места — тот же язык, что и в таблице рейтинга. */
.clan-rank-medal {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
margin-right: 6px;
vertical-align: baseline;
}
.clan-rank-chip--medal1 .clan-rank-medal { background: linear-gradient(145deg, #ffd977, #e0a51f); }
.clan-rank-chip--medal2 .clan-rank-medal { background: linear-gradient(145deg, #e6ecf3, #a8b4c2); }
.clan-rank-chip--medal3 .clan-rank-medal { background: linear-gradient(145deg, #e5a878, #b1703c); }
.clan-rank-chip--medal2 { color: #cfd8e3; background: rgba(200, 212, 226, 0.1); border-color: rgba(200, 212, 226, 0.3); }
.clan-rank-chip--medal3 { color: #e0a877; background: rgba(200, 130, 70, 0.12); border-color: rgba(200, 130, 70, 0.32); }
/* Свежесть последнего боя: неделя / месяц / давно */
.act-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
margin-right: 7px;
vertical-align: middle;
}
.act-dot--hot { background: #4dd67a; box-shadow: 0 0 6px rgba(77, 214, 122, 0.55); }
.act-dot--warm { background: #d8a748; }
.act-dot--cold { background: rgba(255, 255, 255, 0.22); }
/* Шапка состава: заголовок слева, доля активных полосой справа. */
.clan-roster-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.clan-source-notice {
display: block;
color: #d0bc93;
font-size: 12px;
line-height: 1.5;
white-space: normal;
}
.roster-split { display: flex; align-items: center; gap: 10px; }
.roster-split-bar {
width: 120px;
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.roster-split-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3fbf6a, #63dd8d); }
.roster-split-label { font-size: 12.4px; color: var(--muted); white-space: nowrap; }
.clan-info-grid { margin-bottom: 20px; }
.clan-description {
padding: 14px 16px;
margin-bottom: 20px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.035);
border: 1px solid var(--line-soft);
color: var(--text-dim);
font-size: 14px;
line-height: 1.6;
white-space: pre-wrap;
}
/* Плитка балла — кнопка: раскрывает разбор формулы под шапкой. */
.metric-card-btn {
font: inherit;
text-align: left;
cursor: pointer;
width: 100%;
}
.metric-why {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
margin-left: 3px;
border-radius: 50%;
font-size: 10px;
font-weight: 700;
color: var(--accent-ink);
background: var(--accent);
vertical-align: middle;
}
.metric-card-btn[aria-expanded='true'] {
background: rgba(255, 201, 77, 0.1);
border-color: rgba(255, 201, 77, 0.4);
}
/* ---- Страница клана ------------------------------------------------------ */
.clan-crumb {
margin-bottom: 12px;
font-size: 12.5px;
color: var(--text-faint);
}
.clan-crumb a { color: var(--text-dim); text-decoration: none; }
.clan-crumb a:hover { color: var(--text); }
.clan-crumb span { margin: 0 6px; }
.clan-hero {
position: relative;
padding: 22px 24px 24px;
border-radius: var(--radius);
background: radial-gradient(620px 220px at 10% 0%, rgba(255, 201, 77, 0.16), transparent 70%), var(--surface);
border: 1px solid rgba(255, 255, 255, 0.09);
overflow: hidden;
margin-bottom: 16px;
}
/* Тег клана «водяным знаком» целиком: заполняет правый край шапки и опознаёт
клан издалека, не отбирая внимание у цифр. Кегль зависит от длины тега
(--wm-len ставит clan.js): двухбуквенный — крупно, пятибуквенный ужимается,
чтобы целиком влезть в отведённые ~400px и не наехать на текст слева.
Ширина буквы Oswald Bold ≈ 0.55em — отсюда делитель. */
.clan-hero-watermark {
position: absolute;
right: 12px;
/* Знак стоит по центру визитки клана (аватар + название), а не по центру
всей шапки: с блоком средней статы шапка стала вдвое выше, и центрованный
по ней знак уезжал под плитки. Отступ отмерян от верха, а не долей высоты,
чтобы длина мотто и переименование его больше не двигали. */
top: 104px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: flex-end;
color: rgba(255, 201, 77, 0.075);
pointer-events: none;
user-select: none;
white-space: nowrap;
text-align: right;
}
.clan-hero-watermark-tag {
font: 700 min(140px, calc(400px / (var(--wm-len, 2) * 0.55))) / 0.9 Oswald, sans-serif;
letter-spacing: -0.01em;
}
.clan-hero-main { position: relative; display: flex; align-items: flex-start; gap: 20px; }
.clan-hero-id { flex: 1; min-width: 0; }
.clan-hero-avatar { width: 84px; height: 84px; font-size: 30px; }
.clan-hero-meta {
margin: 9px 0 0;
font-size: 14px;
line-height: 1.5;
color: var(--text-dim);
}
/* Средняя стата клана — прямо в шапке, теми же плитками, что и в профиле
игрока (.metric-card): вопрос «а какой это клан по цифрам» человек задаёт
раньше, чем «из чего сложился балл», поэтому средние стоят выше разбора
силы. Переключатель периода набран как у графика места (.clan-range). */
.clan-avg {
position: relative;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--line-soft);
}
.clan-avg-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 11px;
}
.clan-avg-head-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.clan-avg-title {
margin: 0;
font: 700 13.5px Oswald, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text);
}
.clan-avg-note { font-size: 11px; color: var(--text-faint); }
.clan-avg-switch { flex: none; }
/* Четыре в ряд — на широком экране, но жёсткие четыре колонки на планшете
ужимали карточку до 156px, и подписи резались многоточием. auto-fit сам
переходит на три, а подпись при нехватке места переносится, а не обрезается:
«Средний рейтинг · за всё время» в недельном режиме длиннее любой карточки. */
.clan-avg-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 10px;
}
.clan-avg-grid .metric-label { white-space: normal; line-height: 1.25; }
/* Дельта недели приписана к цифре, а не к подписи: сравнение относится к
значению, а подпись и без того длинная. */
.clan-avg-delta { margin-left: 6px; font: 700 12px Inter, sans-serif; }
.clan-avg-delta.is-up { color: #4dd67a; }
.clan-avg-delta.is-down { color: #ff8f8f; }
.clan-avg-sub {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 10px;
}
.clan-avg-tile {
padding: 11px 14px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--line-soft);
}
.clan-avg-tile-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.clan-avg-tile-top span { font-size: 11.5px; color: var(--text-faint); }
.clan-avg-tile-top b { font: 700 16px Oswald, sans-serif; color: var(--text); white-space: nowrap; }
.clan-avg-tile-top b i { font: 400 11.5px Inter, sans-serif; font-style: normal; color: var(--text-faint); }
.clan-avg-tile-top b.is-good { color: #4dd67a; }
.clan-avg-tile-top b.is-warn { color: #d8a748; }
.clan-avg-tile-top b.is-accent { color: var(--accent); }
/* Плитка с графиком выше двух соседних: столбики ужаты до 40px, чтобы ряд не
раздувал шапку клана, но неделя всё равно читалась. */
.clan-avg-tile--activity .activity-bars { height: 40px; margin-top: 14px; }
.clan-avg-tile--activity .clan-avg-tile-top { justify-content: flex-start; gap: 8px; }
.clan-avg-tile-note { margin: 5px 0 0; font-size: 11px; line-height: 1.4; color: var(--text-faint); }
/* Гистограмма активности состава: столбик на день, справа — сегодня. Разметку
собирает activityBars.js — один и тот же график стоит в карточке клана на
главной и в шапке самого клана. */
.activity-bars {
display: grid;
grid-template-columns: repeat(var(--slots, 7), minmax(0, 1fr));
align-items: end;
gap: 6px;
height: 56px;
padding-bottom: 1px;
border-bottom: 1px solid var(--line-soft);
}
.activity-bars > i {
position: relative;
display: block;
height: var(--h, 0%);
min-height: 2px;
border-radius: 4px 4px 1px 1px;
background: linear-gradient(180deg, #63dd8d, #3fbf6a);
opacity: 0.9;
transition: height 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
/* Столбики вырастают снизу по очереди, слева направо: за пол-секунды видно,
что это неделя по дням, а не статичный орнамент. --i задаёт очередь. */
animation: homeBarGrow 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) both;
animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes homeBarGrow {
from { height: 0; opacity: 0; }
}
/* Число над столбиком: у высоких — внутри у верха, чтобы не вылезать за поле. */
.activity-bars > i > b {
position: absolute;
left: 0;
right: 0;
bottom: 100%;
margin-bottom: 2px;
font-size: 10px;
font-weight: 700;
font-style: normal; /* столбик — это <i>, иначе число наследует курсив */
line-height: 1;
text-align: center;
color: var(--text-dim);
font-variant-numeric: tabular-nums;
/* Цифра догоняет свой столбик — всплывает, когда тот уже дорос. */
animation: homeBarNum 0.32s ease-out both;
animation-delay: calc(var(--i, 0) * 60ms + 300ms);
}
@keyframes homeBarNum {
from { opacity: 0; transform: translateY(5px); }
}
.activity-bars > i.is-zero { background: rgba(255, 255, 255, 0.08); opacity: 1; }
/* Оценка снизу (истории за день ещё нет): бледнее и штрихом — не спутать с точным. */
.activity-bars > i.is-estimate {
background: repeating-linear-gradient(135deg, rgba(99, 221, 141, 0.45) 0 3px, rgba(99, 221, 141, 0.18) 3px 6px);
opacity: 0.8;
}
.activity-bars > i.is-estimate > b { color: var(--text-faint); }
.activity-bars > i.is-today {
background: linear-gradient(180deg, #ffe08a, #e0a51f);
opacity: 1;
box-shadow: 0 0 10px rgba(255, 201, 77, 0.35);
}
.activity-bars > i.is-today > b { color: var(--accent); }
.activity-bars > i:hover { opacity: 1; filter: brightness(1.15); }
/* Скелет, пока состав едет из Lesta: пульсирующие заглушки той же высоты. */
.activity-bars.is-loading > i {
height: 30%;
background: rgba(255, 255, 255, 0.06);
animation: homeBarsPulse 1.2s ease-in-out infinite;
}
.activity-bars.is-loading > i:nth-child(odd) { height: 45%; }
.activity-bars.is-loading > i:nth-child(3n) { height: 20%; }
@keyframes homeBarsPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.activity-bars-axis {
display: grid;
grid-template-columns: repeat(var(--slots, 7), minmax(0, 1fr));
gap: 6px;
margin-top: 4px;
font-size: 9.5px;
color: var(--text-faint);
}
.activity-bars-axis span { text-align: center; white-space: nowrap; }
.activity-bars-axis span:last-child { color: var(--accent); font-weight: 700; }
/* Месяц по дням: тридцать столбиков в ту же ширину — тоньше, без зазора в
полшага и без цифр сверху (их место занимает тултип). Подписи по дням
недели тут тоже не встают, поэтому под графиком только две крайние даты. */
.activity-bars.is-dense { gap: 2px; }
.activity-bars.is-dense > i { border-radius: 2px 2px 1px 1px; }
.activity-bars-span {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 4px;
font-size: 9.5px;
color: var(--text-faint);
white-space: nowrap;
}
.activity-bars-span span:last-child { color: var(--accent); }
/* Кому анимация мешает — сразу конечное состояние. */
@media (prefers-reduced-motion: reduce) {
.activity-bars > i,
.activity-bars > i > b { animation: none; }
}
/* Оценка балла словами — чипом прямо под самим баллом. Базовый .power-tier
набран в одну строку, а в узкой плитке «Очень сильный клан» так не встаёт. */
.clan-avg-tile .power-tier {
display: inline-block;
margin-top: 6px;
white-space: normal;
}
/* Разбор силы: кольцо с баллом, слагаемые и колонка активности в одном ряду —
это ответ на главный вопрос страницы, поэтому он открыт сразу. */
.clan-power-block {
position: relative;
display: grid;
grid-template-columns: 290px minmax(0, 1fr);
gap: 20px;
margin-bottom: 16px;
padding: 18px 20px;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.clan-power-block--empty { display: block; }
.clan-power-gauge { display: flex; align-items: center; gap: 14px; }
.clan-power-gauge .power-gauge { width: 124px; height: 124px; margin-top: 0; }
.clan-power-gauge-side { min-width: 0; }
/* Кольцо здесь уже, чем базовое (150px → 124px), а цифры остались в исходном
38px размере, рассчитанном под то кольцо — трёхзначный балл с десятичной
(«102,7») в него физически не помещается и вылезает за обод. */
.clan-power-gauge .power-gauge-num strong { font-size: 30px; }
.clan-power-gauge .power-gauge-num span { font-size: 10px; }
.clan-power-title {
font: 700 16px Oswald, sans-serif;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 7px;
}
.clan-power-rated { margin: 9px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-faint); }
.clan-power-parts { display: flex; flex-direction: column; gap: 11px; justify-content: center; }
.clan-power-part-top { display: flex; align-items: baseline; gap: 9px; font-size: 12.5px; color: var(--text-dim); }
.clan-power-part-top b { font-size: 13px; color: var(--text); }
.clan-power-points {
margin-left: auto;
font: 700 14px Oswald, sans-serif;
color: var(--text);
white-space: nowrap;
}
.clan-power-points i { font: 400 10.5px Inter, sans-serif; font-style: normal; color: var(--text-faint); }
.clan-power-bar {
display: block;
height: 8px;
margin-top: 5px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.07);
overflow: hidden;
}
.clan-power-bar > i { display: block; height: 100%; background: var(--accent-grad); }
.clan-power-part.is-over .clan-power-bar > i { background: linear-gradient(90deg, #ffd166, #ff8f3b); }
.clan-power-sum { font-size: 11.5px; color: var(--text-faint); }
.clan-power-sum b { color: var(--accent); }
.clan-power-more {
padding: 0;
border: 0;
background: none;
font: 600 11.5px Inter, sans-serif;
color: var(--accent);
cursor: pointer;
}
.clan-power-more:hover { text-decoration: underline; }
/* Панели под шапкой: подиум, требования, описание. */
.clan-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.clan-panel {
padding: 18px 20px;
margin-bottom: 16px;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.clan-panels .clan-panel { margin-bottom: 0; }
.clan-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.clan-panel-title {
margin: 0;
font: 700 13.5px Oswald, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text);
}
.clan-panel-note { font-size: 11px; color: var(--text-faint); }
.clan-panel-empty { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-faint); }
/* График места. Ось Y перевёрнута — первое место сверху, поэтому линия вверх
означает подъём, а не рост числа. */
.clan-range-switch { display: flex; gap: 4px; }
.clan-range {
padding: 4px 10px;
border: 0;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.05);
color: var(--text-dim);
font: 600 11px Inter, sans-serif;
cursor: pointer;
}
.clan-range.is-active { color: var(--accent-ink); background: var(--accent); }
.clan-history-chart { display: block; width: 100%; height: 140px; }
.clan-history-ends {
display: flex;
justify-content: space-between;
margin-top: 6px;
font: 11px Inter, sans-serif;
color: var(--text-faint);
}
.clan-history-ends .is-now { color: var(--accent); font-weight: 700; }
/* Движение места за месяц — рядом с чипом места в шапке клана. */
.clan-move-chip {
padding: 5px 11px;
border-radius: 999px;
font: 700 11.5px Inter, sans-serif;
border: 1px solid transparent;
}
.clan-move-chip.is-up { color: #4dd67a; background: rgba(77, 214, 122, 0.1); border-color: rgba(77, 214, 122, 0.3); }
.clan-move-chip.is-down { color: #ff8f8f; background: rgba(255, 90, 90, 0.08); border-color: rgba(255, 90, 90, 0.25); }
/* Подиум «кто тащит»: победитель по центру и выше остальных — тройка читается
без чтения цифр. */
.clan-podium { display: flex; align-items: flex-end; gap: 10px; }
.clan-podium-slot {
flex: 1;
min-width: 0;
text-align: center;
text-decoration: none;
color: inherit;
}
.clan-podium-face {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin: 0 auto;
border-radius: 50%;
font: 700 14px Oswald, sans-serif;
background: rgba(195, 204, 215, 0.15);
border: 1px solid rgba(195, 204, 215, 0.35);
color: var(--text);
}
.clan-podium-slot--1 .clan-podium-face {
width: 46px;
height: 46px;
font-size: 17px;
background: rgba(255, 201, 77, 0.18);
border-color: rgba(255, 201, 77, 0.45);
color: var(--accent);
}
.clan-podium-slot--3 .clan-podium-face { background: rgba(208, 139, 76, 0.16); border-color: rgba(208, 139, 76, 0.35); }
.clan-podium-nick {
display: block;
margin-top: 7px;
font: 600 11.5px Inter, sans-serif;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.clan-podium-slot--1 .clan-podium-nick { font-weight: 700; font-size: 12px; }
.clan-podium-stat { display: block; font: 11px Inter, sans-serif; color: var(--text-dim); }
.clan-podium-slot--1 .clan-podium-stat { color: var(--accent); font-weight: 700; }
.clan-podium-bar {
display: block;
margin-top: 6px;
padding-top: 4px;
border-radius: 4px 4px 0 0;
font: 700 12px Oswald, sans-serif;
background: linear-gradient(180deg, rgba(195, 204, 215, 0.35), rgba(195, 204, 215, 0.08));
color: #c3ccd7;
}
.clan-podium-slot--1 .clan-podium-bar { background: linear-gradient(180deg, rgba(255, 201, 77, 0.4), rgba(255, 201, 77, 0.08)); color: var(--accent); font-size: 13px; }
.clan-podium-slot--3 .clan-podium-bar { background: linear-gradient(180deg, rgba(208, 139, 76, 0.35), rgba(208, 139, 76, 0.08)); color: #d08b4c; }
.clan-podium-slot:hover .clan-podium-nick { color: var(--accent); }
/* Требования к новичкам: не список в пустоту, а сверка с показателями гостя. */
.clan-req-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 9px; }
.clan-req {
display: flex;
flex-direction: column;
gap: 3px;
padding: 11px 13px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
}
.clan-req.is-pass { background: rgba(77, 214, 122, 0.05); border-color: rgba(77, 214, 122, 0.2); }
.clan-req.is-fail { background: rgba(255, 90, 90, 0.05); border-color: rgba(255, 90, 90, 0.2); }
.clan-req-label { font-size: 11px; color: var(--text-faint); }
.clan-req-need { font: 700 15px Inter, sans-serif; color: var(--text); }
.clan-req-mine { font-size: 10.5px; color: var(--text-dim); }
.clan-req.is-pass .clan-req-mine { color: #4dd67a; }
.clan-req.is-fail .clan-req-mine { color: #ff8f8f; }
.clan-req-verdict {
margin: 11px 0 0;
padding: 11px 13px;
border-radius: var(--radius-sm);
background: rgba(73, 243, 214, 0.06);
border-left: 2px solid var(--cyan);
font-size: 12px;
line-height: 1.55;
color: var(--text-dim);
}
.clan-req-verdict b { color: var(--text); }
.clan-req-verdict a { color: var(--cyan); }
/* Ник командующего — кнопкой, не текстом: клик копирует его в буфер, чтобы
написать в игре точь-в-точь без ручного выделения жирного слова в абзаце. */
.clan-leader-chip {
display: inline-flex;
align-items: center;
gap: 4px;
margin: 0 1px;
padding: 1px 6px 1px 8px;
border: 1px solid rgba(73, 243, 214, 0.3);
border-radius: 999px;
background: rgba(73, 243, 214, 0.08);
font: inherit;
color: inherit;
cursor: pointer;
vertical-align: baseline;
transition: border-color 0.15s ease, background 0.15s ease;
}
.clan-leader-chip:hover { border-color: var(--cyan); background: rgba(73, 243, 214, 0.14); }
.clan-leader-chip b { color: var(--text); font-weight: 600; }
.clan-leader-chip-icon { display: inline-flex; color: var(--text-faint); }
.clan-leader-chip-icon svg { width: 12px; height: 12px; }
.clan-leader-chip.is-copied { border-color: var(--green); background: rgba(143, 209, 63, 0.12); }
.clan-leader-chip.is-copied .clan-leader-chip-icon { color: var(--green); }
/* Состав */
.clan-member-cell { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.clan-member-face {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex: none;
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
overflow: hidden;
background: rgba(255, 255, 255, 0.07);
font: 700 11px Oswald, sans-serif;
color: var(--text-dim);
}
.clan-member-face.has-pic { background: var(--surface-2); }
.clan-member-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Бои и % побед — жирнее и светлее: тонкие серые цифры на тёмном фоне
терялись рядом с ником. Цвет % побед оставляем классам wr-*. */
#clanMembersBox .players-table td:nth-child(2) { font-weight: 700; color: var(--text); }
#clanMembersBox .players-table td:nth-child(3) { font-weight: 700; }
/* Роль — под ником, как в игре: ника с должностью в одной строке не помещалось,
а отдельная колонка «Роль» отъедала место у более важных цифр. */
.clan-member-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.clan-member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-member-role { font-size: 11px; font-weight: 700; color: var(--muted); }
.clan-member-role.is-commander { color: var(--accent); }
.clan-member-role.is-officer { color: #7fc6f5; }
.clan-silent {
display: block;
margin-top: 2px;
font-size: 10.5px;
color: var(--text-faint);
}
.clan-roster-more {
display: block;
width: 100%;
padding: 9px 16px;
border: 0;
border-top: 1px solid var(--line-soft);
background: rgba(255, 255, 255, 0.015);
font: 11.5px Inter, sans-serif;
letter-spacing: 0.06em;
color: var(--text-faint);
cursor: pointer;
}
.clan-roster-more:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.clans-filter--bad { color: #ff8f8f; background: rgba(255, 90, 90, 0.08); border-color: rgba(255, 90, 90, 0.22); }
.clans-filter--bad.is-active { color: var(--accent-ink); }
@media (max-width: 1000px) {
.clan-power-block { grid-template-columns: minmax(0, 1fr); }
}
/* Вкладки профиля и чипы сортировки состава — только телефон: на широком
экране все разделы видны сразу, а сортирует шапка таблицы. */
.clan-tabs,
.clan-roster-sort { display: none; }
@media (max-width: 640px) {
.clan-tabs {
display: flex;
gap: 6px;
margin: 0 0 14px;
overflow-x: auto;
scrollbar-width: none;
}
.clan-tabs::-webkit-scrollbar { display: none; }
/* Вкладки делят ширину поровну вместо «сколько попросил текст»: так они не
упираются друг в друга и не уезжают за край на узком экране. */
.clan-tab {
flex: 1 1 0;
min-width: 0;
height: 36px;
padding: 0 8px;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.04);
color: var(--text-dim);
font: 600 12px Inter, sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.clan-tab.is-active {
color: var(--accent-ink);
background: var(--accent-grad);
border-color: transparent;
}
/* Раздел показывается, только когда его вкладка активна. Разметку разделов
собирают три независимых рендера, поэтому класс проставляет applyTab().
Селектор скопом на .clan-panel — иначе [data-tab] ловит любой элемент с
таким атрибутом на любой странице (так и вышло с вкладками статистики в
профиле игрока: они пропадали целиком на экранах уже 640 px). Все секции
клана с data-tab несут этот класс (см. public/clan.js). */
.clan-panel[data-tab] { display: none; }
.clan-panel[data-tab].is-tab-on { display: block; }
.clan-hero { padding: 18px 16px 20px; }
.clan-hero-watermark { right: 8px; top: 52px; }
.clan-hero-watermark-tag { font-size: min(88px, calc(210px / (var(--wm-len, 2) * 0.55))); }
.clan-hero-main { gap: 12px; }
.clan-hero-avatar { width: 52px; height: 52px; font-size: 20px; }
.clan-power-block { padding: 14px; gap: 16px; }
/* Четыре плитки в ряд на 390px нечитаемы — та же сетка 2×2, что и в шапке
профиля игрока. Активность остаётся строкой во всю ширину: у неё полоса. */
.clan-avg-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.clan-avg-sub { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.clan-avg-sub > .clan-avg-tile:first-child { grid-column: 1 / -1; }
.clan-avg-head { gap: 8px; margin-bottom: 9px; }
.clan-avg-title { font-size: 12px; }
.clan-avg-note { display: none; }
.clan-avg-tile-top b { font-size: 15px; }
.clan-avg-tile .power-tier { padding: 3px 8px; font-size: 11px; }
.clan-power-gauge { gap: 12px; }
.clan-power-gauge .power-gauge { width: 92px; height: 92px; }
.clan-roster-head { flex-wrap: wrap; gap: 10px; }
/* Состав на телефоне — список, а не таблица: семь колонок там всё равно
уезжают в горизонтальный скролл, а прочитать в них ничего нельзя.
Строка складывается в две: ник и урон сверху, роль и остальные цифры под
ними. Сортировку берут на себя чипы — шапки таблицы больше нет. */
.clan-roster-sort {
display: block;
margin: 0 0 10px;
}
/* Заголовок и фильтры встают друг под друга: рядом они делят 375px так, что
кнопкам остаётся половина строки. */
.clan-roster-head { display: block; }
.clans-filters--head { display: none; }
/* Фильтры встают первыми в той же ленте, что и чипы сортировки, и набраны
так же — иначе в одном ряду соседствовали бы кнопки разной высоты. */
.clans-filters--bar {
display: contents;
}
.clan-sortbar-chips .clans-filter {
flex: none;
height: 38px;
padding: 0 11px;
border-radius: var(--radius);
font-size: 12.5px;
}
/* Разделитель между фильтрами и сортировкой: две группы кнопок подряд иначе
читаются как одна. */
.clan-sortbar-sep {
flex: none;
align-self: center;
width: 1px;
height: 20px;
background: var(--border-strong);
}
#clanMembersBox .marks-table-wrap { overflow-x: visible; }
#clanMembersBox .players-table { min-width: 0; }
#clanMembersBox .players-table thead { display: none; }
#clanMembersBox .players-table,
#clanMembersBox .players-table tbody { display: block; }
#clanMembersBox .players-table tr {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
padding: 11px 12px;
border-bottom: 1px solid var(--line-soft);
}
#clanMembersBox .players-table td {
display: block;
padding: 0;
border: 0;
font-size: 12px;
color: var(--text-dim);
}
/* max-width:120px ник получал от старой табличной мобилки — в списке колонок
нет, и ужимать его до трети экрана больше не за чем. Роль ушла под ник
(см. .clan-member-role), отдельной колонки под неё больше нет — семь
td остались как были (1 ник, 2 бои, 3 % побед, 4 ср. урон, 5 рейтинг,
6 последний бой, 7 вступил). Рейтинг — не у всех бойцов (Lesta не отдаёт
его на калибровке), поэтому карточки без него не должны терять высоту
соседней строки: рейтинг встал рядом с ником (та же строка, правый край),
ср. урон — отдельной строкой под ним, а не оба в одной плавающей ячейке. */
#clanMembersBox .players-table td:nth-child(1) { order: 1; flex: 1 1 auto; min-width: 0; max-width: none; font-size: 13.5px; }
#clanMembersBox .players-table td:nth-child(5) { order: 2; flex: none; margin-left: auto; font: 700 14px Oswald, sans-serif; color: var(--accent); }
#clanMembersBox .players-table td:nth-child(4) { order: 3; flex: 0 0 100%; text-align: right; font-weight: 700; color: var(--accent); }
#clanMembersBox .players-table td:nth-child(2) { order: 4; flex: none; }
#clanMembersBox .players-table td:nth-child(3) { order: 5; flex: none; font-weight: 700; }
/* Активность — своей строкой в самом низу карточки, справа: раньше висела
вперемешку с боями/% побед и терялась. */
#clanMembersBox .players-table td:nth-child(6) { order: 6; flex: 0 0 100%; text-align: right; }
/* Дата вступления — единственное, чем в списке можно пожертвовать. */
#clanMembersBox .players-table td:nth-child(7) { display: none; }
/* Шапка таблицы на телефоне скрыта, поэтому числа подписаны сами: без этого
«2 369» рядом с «72.2%» не читается ни как урон, ни как что-либо ещё. */
#clanMembersBox .players-table td:nth-child(2)::after { content: ' боёв'; color: var(--text-faint); }
#clanMembersBox .players-table td:nth-child(3)::after { content: ' побед'; font-weight: 400; color: var(--text-faint); }
#clanMembersBox .players-table td:nth-child(4)::before {
content: 'ср. урон ';
font: 400 10.5px Inter, sans-serif;
color: var(--text-faint);
}
/* Рейтинг — тоже с подписью слева, и у значения, и у прочерка, когда
рейтинга нет (калибровка). */
#clanMembersBox .players-table td:nth-child(5)::before {
content: 'рейтинг ';
font: 400 10.5px Inter, sans-serif;
color: var(--text-faint);
}
/* Ячейка ника — блочный флекс на всю ширину строки: inline-flex ужимался по
содержимому и обрезал ник задолго до края экрана. */
#clanMembersBox .clan-member-cell { display: flex; width: 100%; min-width: 0; }
#clanMembersBox .clan-member-cell > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* На обычной десктопной ширине окна (не безрамочный монитор, а окно ~1200-1300px,
типичный ноутбучный экран) семь колонок с базовым паддингом таблицы не влезают
в колонку ленты: таблица уходит в горизонтальный скролл, и колонка «Вступил»
прячется за правым краем — её видно, только дотянув ползунок внизу таблицы
вправо. Паддинг у'же, а min-width снят — так таблица занимает всю доступную
ширину без внутренней прокрутки на большинстве экранов. */
@media (min-width: 641px) {
#clanMembersBox .players-table { width: 100%; min-width: 0; }
#clanMembersBox .players-table th,
#clanMembersBox .players-table td { padding-left: 10px; padding-right: 10px; }
#clanMembersBox .players-table th:first-child,
#clanMembersBox .players-table td:first-child { padding-left: 14px; }
#clanMembersBox .players-table th:last-child,
#clanMembersBox .players-table td:last-child { padding-right: 14px; }
}
.score-explain {
padding: 18px 20px 20px;
border-top: 1px solid var(--border);
background: rgba(0, 0, 0, 0.2);
}
.score-explain-lead {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: var(--text-dim);
}
/* «Мощность клана»: кольцо с баллом слева, три полосы справа, формула — под
спойлером. Простой слой не упоминает ни поправок, ни якорей: только
«сколько набрал из максимума». */
.power-gauge {
position: relative;
width: 150px;
height: 150px;
margin-top: 8px;
justify-self: center;
filter: drop-shadow(0 8px 24px rgba(255, 201, 77, 0.18));
}
.power-ring {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.power-ring-track {
fill: none;
stroke: rgba(255, 255, 255, 0.07);
stroke-width: 9;
}
.power-ring-fill {
fill: none;
stroke: url(#powerRingGrad);
stroke-width: 9;
stroke-linecap: round;
animation: power-ring 1s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
@keyframes power-ring {
from { stroke-dashoffset: 326.73; }
}
.power-gauge-num {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
pointer-events: none;
}
.power-gauge-num strong {
font-family: "Oswald", "Inter", sans-serif;
font-size: 38px;
font-weight: 700;
line-height: 1;
color: var(--accent);
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.power-gauge-num span {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.power-tier {
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
color: var(--accent);
background: rgba(255, 201, 77, 0.12);
border: 1px solid rgba(255, 201, 77, 0.35);
}
.power-tier--1 { color: #c9d1dc; background: rgba(200, 212, 226, 0.08); border-color: rgba(200, 212, 226, 0.25); }
.power-tier--2 { color: #7fd69a; background: rgba(77, 214, 122, 0.1); border-color: rgba(77, 214, 122, 0.3); }
.power-tier--3 { color: #7fc6f5; background: rgba(90, 170, 230, 0.12); border-color: rgba(90, 170, 230, 0.32); }
.power-tier--4 { color: #8fd0ff; background: rgba(110, 185, 240, 0.13); border-color: rgba(110, 185, 240, 0.34); }
.power-tier--5 { color: #d9a5ff; background: rgba(190, 120, 255, 0.13); border-color: rgba(190, 120, 255, 0.35); }
@keyframes power-row-in {
from { opacity: 0; transform: translateX(-8px); }
}
.power-row-icon {
width: 34px;
height: 34px;
flex: none;
object-fit: contain;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
@keyframes power-bar-grow {
from { width: 0; }
}
/* Спойлер с формулой — для тех, кто хочет углубиться. */
.power-details-body {
margin-top: 10px;
font-size: 12.6px;
line-height: 1.6;
color: var(--muted);
}
.power-details-body p { margin: 0 0 10px; }
.power-details-body b { color: var(--text-dim); }
.power-how-lead { color: var(--text-dim); font-size: 13.2px; }
/* Разбор по показателям: шкала «слабо … сильно» с меткой, где стоит клан. */
.power-how-list { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 6px; }
.power-how {
padding: 12px 14px 10px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--line-soft);
}
.power-how-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 26px;
}
.power-how-head .power-row-icon { width: 26px; height: 26px; }
.power-how-label { font-size: 14px; font-weight: 600; color: var(--text); }
.power-how-points {
margin-left: auto;
font-size: 15px;
font-weight: 800;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.power-scale { margin: 0 26px; }
.power-scale-track {
position: relative;
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 201, 77, 0.22));
}
.power-scale-fill {
position: absolute;
inset: 0 auto 0 0;
border-radius: 999px;
background: linear-gradient(90deg, #e0a51f, #ffd977);
}
.power-scale-marker {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
border-radius: 50%;
transform: translate(-50%, -50%);
background: #ffe08a;
border: 3px solid #1a1a1a;
box-shadow: 0 0 0 1.5px var(--accent), 0 0 12px rgba(255, 201, 77, 0.55);
}
.power-scale-marker b {
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
padding: 2px 7px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
color: var(--accent-ink, #241a05);
background: var(--accent);
font-variant-numeric: tabular-nums;
}
.power-scale-ends {
display: flex;
justify-content: space-between;
margin-top: 7px;
font-size: 11.5px;
color: var(--text-faint);
letter-spacing: 0.02em;
}
.power-how-note { margin: 10px 0 0 !important; font-size: 13px; color: var(--text-dim); }
.power-how-note b { color: var(--accent); }
.power-how-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.power-how-points i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }
.power-scale-ends em { font-style: normal; font-weight: 700; color: var(--text-dim); }
.power-how--over .power-scale-track { background: linear-gradient(90deg, rgba(255, 201, 77, 0.35), rgba(255, 220, 130, 0.5)); }
/* Сумма слагаемых: 40.4 + 22.4 + 13.8 = 76.6 */
.power-how-block { margin-bottom: 12px; }
.power-how-block h4 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--text); }
.power-how-block p { margin: 0 0 6px; }
@media (max-width: 640px) {
.power-gauge { width: 130px; height: 130px; }
.power-gauge-num strong { font-size: 32px; }
.power-row-icon { width: 28px; height: 28px; }
}
.score-explain-stamp {
margin: 10px 0 0;
font-size: 12px;
line-height: 1.55;
color: var(--text-faint);
font-style: italic;
}
.clan-sort-th { cursor: pointer; user-select: none; white-space: nowrap; }
.clan-sort-th:hover { color: var(--text); }
/* Стрелка есть у каждой сортируемой колонки, но приглушена — чтобы было видно,
что по столбцу можно отсортировать; у активной она яркая и показывает направление. */
.sort-arrow {
display: inline-block;
margin-left: 4px;
font-size: 0.85em;
opacity: 0.35;
transition: opacity 0.15s;
}
.clan-sort-th:hover .sort-arrow { opacity: 0.7; }
.clan-sort-th.sort-active .sort-arrow { opacity: 1; }
/* Не игравшие месяц — приглушены, но остаются читаемыми. */
.clan-member-idle td { opacity: 0.5; }
.clan-last-battle { color: var(--muted); white-space: nowrap; }
.mark-badge {
display: inline-block;
padding: 3px 9px;
border-radius: var(--radius-sm);
font-size: 12.6px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
background: var(--surface-2);
border: 1px solid var(--border-strong);
color: var(--muted);
}
.mark-badge-4 { background: rgba(242, 169, 59, 0.12); border-color: var(--accent); color: var(--accent); }
.mark-badge-3 { background: rgba(242, 169, 59, 0.12); border-color: var(--accent2); color: var(--accent2); }
.mark-badge-2 { color: var(--text); }
.mark-badge-1 { color: var(--muted); }
/* Post card — намеренно в родной палитре Telegram (синевато-серый бабл, голубые
ссылки, скруглённые углы, шрифт системный), а НЕ в военной стилистике сайта:
пользователь должен сразу считывать "это репост из телеги", а не наш блок.
Единственная связка с сайтом — ширина колонки. */
.tg-post {
max-width: 520px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
/* Имя канала — первой строкой внутри рамки поста, как в Telegram */
.tg-bubble-head {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px 0;
}
.tg-post-channel {
font-size: 16.7px;
font-weight: 600;
color: #62A9E8;
text-decoration: none;
letter-spacing: 0;
}
.tg-post-channel:hover { text-decoration: underline; }
.tg-pin {
font-size: 13.8px;
filter: grayscale(0.3);
}
.tg-bubble {
background: #17212B;
border-radius: 8px;
overflow: hidden;
position: relative;
border: none;
}
.tg-bubble-text {
padding: 6px 14px 9px;
font-size: 17.3px;
line-height: 1.45;
color: #EDEDED;
word-wrap: break-word;
}
.tg-bubble-text p { margin: 0 0 8px; }
.tg-bubble-text p:last-child { margin-bottom: 0; }
.tg-bubble-text a { color: #62A9E8; text-decoration: none; }
.tg-bubble-text a:hover { text-decoration: underline; }
.tg-bubble-text b { font-weight: 600; }
/* Время — это и есть ссылка на пост, как в t.me/s/<channel>: кликабельно,
но выглядит как обычная метка, а не как "заголовок ссылки". */
.tg-time {
color: inherit;
text-decoration: none;
}
a.tg-time:hover { color: #62A9E8; }
.tg-time-inline {
float: right;
margin: 6px 0 0 8px;
font-size: 13.8px;
color: #7A8894;
white-space: nowrap;
}
.tg-time-overlay {
position: absolute;
right: 10px;
bottom: 10px;
padding: 2px 8px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.45);
color: #fff;
font-size: 13.8px;
line-height: 1.5;
}
.tg-media {
display: grid;
gap: 2px;
position: relative;
margin-top: 8px;
}
.tg-media.single { grid-template-columns: 1fr; }
.tg-media.two { grid-template-columns: 1fr 1fr; }
.tg-media.grid { grid-template-columns: 1fr 1fr; }
.tg-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 420px;
}
.tg-media.single img { max-height: 480px; }
.tg-video {
display: block;
width: 100%;
max-height: 480px;
background: #000;
}
.tg-buttons {
display: flex;
flex-direction: column;
gap: 1px;
margin: 9px -14px -9px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tg-btn {
padding: 11px 12px;
text-align: center;
color: #62A9E8;
text-decoration: none;
font-size: 16.1px;
font-weight: 500;
background: rgba(255, 255, 255, 0.03);
}
.tg-btn:hover { background: rgba(255, 255, 255, 0.06); }
/* --- Реакции и комментарии под постом (в той же телеграмной палитре) --- */
.tg-social {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 8px;
padding: 4px 12px 8px;
}
/* Медиа без текста: строке реакций нужен отступ от картинки */
.tg-media + .tg-social { padding-top: 10px; }
/* Время справа от реакций, как в Telegram; ссылка на пост остаётся */
.tg-social-time {
flex-shrink: 0;
margin-left: auto;
padding-bottom: 4px;
font-size: 13.8px;
color: #7A8894;
white-space: nowrap;
}
.tg-reactions {
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
min-height: 28px;
}
.tg-reaction {
display: inline-flex;
align-items: center;
gap: 5px;
height: 30px;
padding: 0 11px 0 9px;
border-radius: 15px;
border: none;
background: rgba(98, 169, 232, 0.14);
color: #62A9E8;
font: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
}
.tg-reaction:hover { background: rgba(98, 169, 232, 0.24); }
.tg-reaction:active { transform: scale(0.94); }
.tg-reaction.is-mine { background: #62A9E8; color: #fff; }
.tg-reaction.is-mine:hover { background: #7ab8ee; }
.tg-reaction-emoji { font-size: 17px; line-height: 1; }
.tg-reaction-count { line-height: 1; }
.tg-reaction-add {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: transparent;
color: #7A8894;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.tg-reaction-add svg { width: 20px; height: 20px; }
.tg-reaction-add:hover { background: rgba(255, 255, 255, 0.06); color: #62A9E8; }
.tg-reaction-picker {
position: absolute;
bottom: calc(100% + 6px);
left: 0;
z-index: 5;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2px;
padding: 6px;
width: max-content;
max-width: min(400px, calc(100vw - 64px));
border-radius: 20px;
background: #242F3D;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
animation: tgPickerIn 0.12s ease-out;
}
@keyframes tgPickerIn {
from { opacity: 0; transform: translateY(4px) scale(0.96); }
to { opacity: 1; transform: none; }
}
.tg-reaction-pick {
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: transparent;
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: transform 0.12s, background 0.12s;
}
.tg-reaction-pick:hover { transform: scale(1.25); background: rgba(255, 255, 255, 0.06); }
.tg-reaction-pick.is-mine { background: rgba(98, 169, 232, 0.25); }
/* Полноширинная кнопка «Прокомментировать» — как под постом в Telegram */
.tg-comments-bar {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 14px;
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
color: #62A9E8;
font: inherit;
font-size: 16.5px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background 0.15s;
}
.tg-comments-bar:hover,
.tg-comments-bar[aria-expanded="true"] { background: rgba(255, 255, 255, 0.05); }
.tg-comments-bar-icon { width: 24px; height: 24px; flex-shrink: 0; }
.tg-comments-bar-label { flex: 1; min-width: 0; }
.tg-comments-bar-chevron {
width: 20px;
height: 20px;
flex-shrink: 0;
color: #7A8894;
transition: transform 0.18s;
}
.tg-comments-bar[aria-expanded="true"] .tg-comments-bar-chevron { transform: rotate(90deg); }
.tg-comments {
border-top: 1px solid rgba(255, 255, 255, 0.06);
background: #0E1621;
padding: 10px 12px 12px;
font-size: 15px;
}
.tg-comments-list { display: flex; flex-direction: column; gap: 10px; }
.tg-comments-loading,
.tg-comments-empty { margin: 4px 0; color: #7A8894; font-size: 14px; }
.tg-comment {
display: flex;
gap: 9px;
align-items: flex-start;
}
.tg-comment.is-deleted > .tg-comment-avatar { background: rgba(255, 255, 255, 0.08); }
.tg-comment-deleted { color: #7A8894; font-style: italic; font-size: 14px; line-height: 30px; }
.tg-comment-avatar {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #5c8bd6, #3f6cb3);
color: #fff;
font-weight: 700;
font-size: 14px;
user-select: none;
}
.tg-comment.is-mine > .tg-comment-avatar { background: linear-gradient(135deg, #f2a93b, #d9822b); }
.tg-comment-main { flex: 1; min-width: 0; }
.tg-comment-head {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 2px;
}
.tg-comment-author {
color: #62A9E8;
font-weight: 600;
text-decoration: none;
font-size: 14.5px;
}
a.tg-comment-author:hover { text-decoration: underline; }
.tg-comment-clan { color: #ffc94d; font-size: 12.5px; font-weight: 600; }
.tg-comment-time { color: #7A8894; font-size: 12.5px; margin-left: auto; }
.tg-comment-body {
color: #EDEDED;
line-height: 1.4;
word-wrap: break-word;
overflow-wrap: anywhere;
}
.tg-comment-actions { display: flex; gap: 12px; margin-top: 3px; }
.tg-comment-action {
border: none;
background: none;
padding: 0;
color: #7A8894;
font: inherit;
font-size: 12.5px;
cursor: pointer;
}
.tg-comment-action:hover { color: #62A9E8; }
.tg-comment-action.is-danger:hover { color: #e05252; }
.tg-comment-action.is-mod { color: #ffb454; }
.tg-comment-action.is-mod:hover { color: #ffd166; }
.tg-comment-actions { align-items: center; }
/* Лайк комментария — сердечко с числом, свой комментарий лайкнуть нельзя */
.tg-comment-like {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 4px 0 0;
border: none;
background: none;
color: #7A8894;
font: inherit;
font-size: 12.5px;
cursor: pointer;
transition: color 0.15s, transform 0.15s;
}
.tg-comment-like svg { width: 16px; height: 16px; }
.tg-comment-like svg path { fill: transparent; transition: fill 0.15s; }
.tg-comment-like:hover { color: #e0527a; }
.tg-comment-like.is-liked { color: #e0527a; }
.tg-comment-like.is-liked svg path { fill: currentColor; }
.tg-comment-like.is-own { cursor: default; opacity: 0.6; }
.tg-comment-like.is-own:hover { color: #7A8894; }
.tg-comment-like.is-pop svg { animation: tgLikePop 0.3s ease-out; }
.tg-comment-like.is-shake { animation: tgLikeShake 0.35s ease-in-out; }
@keyframes tgLikePop { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes tgLikeShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.tg-comment-edited { color: #7A8894; font-size: 12px; font-style: italic; }
/* Инлайн-редактирование своего комментария */
.tg-comment-edit { margin: 4px 0; }
.tg-comment-edit textarea {
width: 100%;
min-height: 40px;
max-height: 200px;
padding: 7px 10px;
border-radius: 10px;
border: 1px solid #62A9E8;
background: #17212B;
color: #EDEDED;
font: inherit;
font-size: 14.5px;
line-height: 1.35;
resize: none;
outline: none;
}
.tg-comment-edit-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.tg-comment-edit-actions .tg-comment-error { margin: 0; }
/* Кнопки в модераторских/редакторских формах */
.tg-mod-btn {
padding: 5px 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: transparent;
color: #EDEDED;
font: inherit;
font-size: 13px;
cursor: pointer;
}
.tg-mod-btn:hover { background: rgba(255, 255, 255, 0.06); }
.tg-mod-btn.is-primary { background: #62A9E8; border-color: #62A9E8; color: #fff; }
.tg-mod-btn.is-primary:hover { background: #7ab8ee; }
.tg-mod-btn.is-danger { background: #e05252; border-color: #e05252; color: #fff; }
.tg-mod-btn.is-danger:hover { background: #ea6a6a; }
/* Форма бана прямо под комментарием (для модератора) */
.tg-mod-form {
margin: 8px 0 4px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(255, 180, 84, 0.35);
background: rgba(255, 180, 84, 0.06);
font-size: 13.5px;
color: #EDEDED;
}
.tg-mod-form-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tg-mod-form-row:last-child { margin-bottom: 0; }
.tg-mod-form select,
.tg-mod-form input[type="text"] {
padding: 5px 8px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: #17212B;
color: #EDEDED;
font: inherit;
font-size: 13px;
}
.tg-mod-form input[type="text"] { flex: 1; min-width: 160px; }
.tg-mod-form-check { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: #7A8894; font-size: 13px; }
/* Забаненный игрок вместо формы видит уведомление */
.tg-comment-banned {
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(224, 82, 82, 0.4);
background: rgba(224, 82, 82, 0.08);
color: #EDEDED;
font-size: 14px;
}
.tg-comment-banned b { color: #ff8a8a; }
.tg-comment-banned-reason { margin-top: 4px; color: #7A8894; font-size: 13px; }
.tg-comment-replies {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
padding-left: 10px;
border-left: 2px solid rgba(98, 169, 232, 0.25);
}
.tg-comment-replies .tg-comment-avatar { width: 24px; height: 24px; font-size: 12px; }
.tg-comment-form-wrap { margin-top: 12px; }
.tg-comment-login {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
color: #7A8894;
font-size: 14px;
}
.tg-comment-login-btn {
display: inline-block;
padding: 6px 14px;
border-radius: 14px;
background: #62A9E8;
color: #fff;
font-weight: 600;
font-size: 13.5px;
text-decoration: none;
}
.tg-comment-login-btn:hover { background: #7ab8ee; }
.tg-comment-replying {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 6px 39px;
padding: 4px 8px 4px 10px;
border-left: 2px solid #62A9E8;
color: #7A8894;
font-size: 13px;
}
.tg-comment-replying b { color: #62A9E8; font-weight: 600; }
.tg-comment-replying button {
margin-left: auto;
border: none;
background: none;
color: #7A8894;
cursor: pointer;
font-size: 13px;
}
.tg-comment-replying button:hover { color: #EDEDED; }
.tg-comment-form-row {
display: flex;
align-items: flex-end;
gap: 9px;
}
.tg-comment-form textarea {
flex: 1;
min-height: 34px;
max-height: 200px;
padding: 7px 12px;
border-radius: 17px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: #17212B;
color: #EDEDED;
font: inherit;
font-size: 14.5px;
line-height: 1.35;
resize: none;
outline: none;
}
.tg-comment-form textarea:focus { border-color: #62A9E8; }
.tg-comment-form textarea::placeholder { color: #7A8894; }
.tg-comment-send {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: #62A9E8;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.tg-comment-send svg { width: 18px; height: 18px; }
.tg-comment-send:hover { background: #7ab8ee; }
.tg-comment-send:disabled { opacity: 0.5; cursor: default; }
.tg-comment-error {
margin: 6px 0 0 43px;
color: #e05252;
font-size: 13px;
}
/* Карточки списков (турниры, кланы) — переиспользуемый паттерн строки
с аватаркой/логотипом слева и раскрывающимся блоком снизу */
.list-cards {
display: flex;
flex-direction: column;
gap: 10px;
}
.list-card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--border);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.list-card:hover,
.list-card:focus-visible { border-color: var(--border-strong); background: var(--surface-2); outline: none; }
.list-card[aria-expanded="true"] { border-color: var(--accent); background: var(--surface-2); }
.list-card-avatar {
width: 44px;
height: 44px;
border-radius: var(--radius);
object-fit: cover;
flex-shrink: 0;
background: var(--surface-2);
border: 1px solid var(--border);
}
.list-card-avatar-placeholder {
display: flex;
align-items: center;
justify-content: center;
font-size: 20.7px;
}
.list-card-main { flex: 1; min-width: 0; }
.list-card-title {
font-weight: 700;
font-size: 16.7px;
color: var(--text);
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.list-card-meta {
display: flex;
gap: 10px;
flex-wrap: wrap;
font-size: 13.8px;
color: var(--muted);
}
.list-card-tag {
padding: 2px 8px;
border-radius: var(--radius-pill);
background: var(--surface-2);
border: 1px solid var(--border);
}
.list-card-tag.is-live { background: rgba(200, 255, 63, 0.12); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.list-card-caret { color: var(--muted); font-size: 12.6px; flex-shrink: 0; }
.list-detail {
padding: 16px;
margin-top: -4px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
border-top: none;
border-left: 2px solid var(--accent);
border-radius: 0 0 var(--radius) var(--radius);
}
.list-detail-teams {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 10px;
}
.list-detail-team {
padding: 10px 12px;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--border);
}
.list-detail-team-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.list-detail-team-players { color: var(--muted); font-size: 13.8px; line-height: 1.4; }
/* Sidebar */
.sidebar-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sidebar-ads {
display: flex;
flex-direction: column;
gap: 18px;
}
/* Виджеты сайдбара (топ игроков, последние новости) */
/* Карточки сайдбара — без рамки: колонка из пяти обведённых «окон» подряд
рисовала пять лишних контуров на экран, а сами карточки и так отделены
друг от друга подложкой и отступом. */
.sidebar-widget {
padding: 18px;
border-radius: var(--radius);
background-color: rgba(18, 24, 20, 0.88);
background-image: var(--glass);
border: none;
box-shadow: var(--shadow-1);
}
.sidebar-widget-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
margin-bottom: 12px;
}
.sidebar-widget-title .hl { color: var(--accent2); }
.sidebar-widget-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
counter-reset: sidebar-rank;
}
.sidebar-widget-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 7px 4px;
text-decoration: none;
color: var(--text);
font-size: 15px;
border-radius: var(--radius-sm);
counter-increment: sidebar-rank;
transition: background 0.15s ease;
}
.sidebar-widget-item::before {
content: counter(sidebar-rank);
flex-shrink: 0;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 6px;
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--muted);
font-size: 12.1px;
font-weight: 700;
}
.sidebar-widget-item:hover { background: var(--surface-2); }
.sidebar-widget-item-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: baseline;
gap: 8px;
}
.sidebar-widget-item-name .muted { color: var(--muted); font-size: 13.2px; }
.sidebar-widget-item-value {
flex-shrink: 0;
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--accent);
font-size: 14.4px;
}
.sidebar-widget-news-item {
display: block;
padding: 8px 4px;
color: var(--text);
text-decoration: none;
font-size: 15px;
line-height: 1.4;
border-bottom: 1px dashed var(--border);
}
.sidebar-widget-news li:last-child .sidebar-widget-news-item { border-bottom: none; }
.sidebar-widget-news-item:hover { color: var(--accent); }
.sidebar-widget-more {
display: block;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border);
color: var(--muted);
text-decoration: none;
font-size: 13.8px;
font-weight: 600;
text-align: right;
}
.sidebar-widget-more:hover { color: var(--accent); }
/* Уведомление об активном розыгрыше в сайдбаре.
Оформлен как промо-баннер дропсов: тёмная карточка со свечением, золотой
рамкой и табло обратного отсчёта — розыгрыш должен цеплять взгляд сразу,
а не читаться как ещё один текстовый блок сайдбара. */
/* Янтарной обводки у розыгрыша больше нет — карточка держится на своём
свечении из угла, а не на контуре. */
.giveaway-widget {
position: relative;
padding: 0;
overflow: hidden;
border: none;
border-radius: var(--bevel, 12px);
background: linear-gradient(160deg, #17180f 0%, var(--bg-deep, #0a0e0c) 62%);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.giveaway-widget:hover {
transform: translateY(-2px);
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.55);
}
/* Мягкое золотое свечение из верхнего угла — то же, чем «светится» баннер
дропсов, только развёрнутое под узкую колонку сайдбара. */
.giveaway-widget-glow {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 120% 70% at 12% 0%, rgba(255, 201, 77, 0.20), transparent 68%),
radial-gradient(ellipse 90% 60% at 100% 100%, rgba(255, 201, 77, 0.07), transparent 70%);
}
.giveaway-widget-inner {
position: relative;
display: flex;
flex-direction: column;
gap: 11px;
padding: 16px;
}
.giveaway-widget-badge {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 7px;
padding: 5px 11px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent-ink, #14170f);
background: var(--accent);
border-radius: var(--radius-pill, 6px);
}
/* Пульсирующая точка отделяет «идёт прямо сейчас» от статичной плашки. */
.giveaway-widget-badge::after {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
animation: giveawayPulse 1.4s ease-in-out infinite;
}
@keyframes giveawayPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.giveaway-widget-text {
display: block;
font-size: 17px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text);
text-decoration: none;
}
.giveaway-widget-text:hover { color: var(--accent); }
.giveaway-widget-prize {
font-size: 13px;
line-height: 1.5;
color: var(--text-dim, #a9b6ac);
padding: 9px 11px;
border: 1px solid var(--line, rgba(255, 255, 255, 0.10));
border-left: 3px solid var(--accent);
border-radius: var(--bevel-sm, 8px);
background: rgba(255, 201, 77, 0.05);
}
.giveaway-widget-prize-label {
display: block;
margin-bottom: 3px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
}
/* ---------- Табло обратного отсчёта ---------- */
.giveaway-widget-timer-label {
display: block;
margin-bottom: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-faint, #6d7a71);
}
.giveaway-countdown { display: flex; gap: 6px; }
.giveaway-cd-cell {
flex: 1 1 0;
min-width: 0;
padding: 7px 4px;
text-align: center;
border: 1px solid rgba(255, 201, 77, 0.28);
border-radius: var(--bevel-sm, 8px);
background: rgba(10, 14, 12, 0.66);
}
.giveaway-cd-num {
display: block;
font-size: 20px;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--accent);
}
.giveaway-cd-label {
display: block;
margin-top: 3px;
font-size: 9px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-faint, #6d7a71);
}
/* Старый класс остаётся ради текстовых сообщений («победителей нет»). */
.giveaway-widget-countdown {
font-size: 13.8px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* ---------- Кнопка и подвал ---------- */
.giveaway-widget-btn {
margin: 2px 0 0;
display: block;
text-align: center;
text-decoration: none;
font-weight: 800;
letter-spacing: 0.03em;
color: var(--accent-ink, #14170f);
background: var(--accent);
border-color: transparent;
}
.giveaway-widget-btn:hover {
color: var(--accent-ink, #14170f);
background: #ffd76b;
border-color: transparent;
}
.giveaway-widget-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-top: 10px;
border-top: 1px solid var(--line, rgba(255, 255, 255, 0.10));
}
.giveaway-widget-count {
font-size: 12.5px;
color: var(--text-faint, #6d7a71);
font-variant-numeric: tabular-nums;
}
/* Завершённый розыгрыш остаётся в сайдбаре ради итогов, но уже не зовёт
участвовать — гасим свечение и золото, чтобы не спорил с идущими блоками. */
.giveaway-widget-finished {
border-color: var(--line-soft, var(--border));
background: linear-gradient(160deg, #141a15 0%, var(--bg-deep, #0a0e0c) 62%);
}
.giveaway-widget-finished:hover { border-color: var(--line-soft, var(--border)); }
.giveaway-widget-finished .giveaway-widget-glow { opacity: 0.35; }
.giveaway-widget-finished .giveaway-widget-badge::after { display: none; }
.giveaway-widget-winners {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.giveaway-widget-winner {
font-size: 14.5px;
font-weight: 600;
color: var(--text);
}
.giveaway-widget-winner a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--accent2, var(--accent));
}
.giveaway-widget-joined {
font-size: 13.5px;
font-weight: 800;
letter-spacing: 0.02em;
color: var(--accent);
}
/* Ссылка на страницу розыгрыша: в сайдбаре только выжимка, участники и
подробные итоги — там. */
.giveaway-widget-more {
font-size: 12.5px;
font-weight: 700;
white-space: nowrap;
color: var(--accent);
text-decoration: none;
}
.giveaway-widget-more:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
.giveaway-widget-badge::after { animation: none; }
.giveaway-widget:hover { transform: none; }
}
/* На телефоне сайдбар (баннер сравнения и т.д.) уходит выше ленты — эти блоки
заточены под узкую боковую колонку на десктопе, а на всю ширину экрана
телефона получаются непропорционально высокими. */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 520px) {
.sidebar-col { gap: 12px; }
}
/* Блок сравнения техники: два танка «лоб в лоб» с мягким свечением под каждым */
.versus-widget {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 220px;
text-decoration: none;
padding: 0;
background-image: url("/backgrounds/compare-widget-bg.jpg");
background-size: cover;
background-position: 15% center;
}
.versus-widget .sidebar-widget-title { display: block; padding: 14px 16px 0; }
.versus-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0;
margin-top: 10px;
}
.versus-side {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
min-width: 0;
}
/* Иконки крупнее самого блока и обрезаются его краями по бокам — как
портреты бойцов на экране выбора в файтингах. Обрезка только по ширине
колонки (танк шире, чем высок), высота коробки взята с запасом, чтобы
сверху и снизу машина не срезалась. */
.versus-img {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 114px;
overflow: hidden;
}
.versus-img::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
border-radius: 50%;
background: var(--accent);
opacity: 0.25;
filter: blur(16px);
pointer-events: none;
transition: opacity 0.2s ease;
}
.versus-img img {
position: relative;
z-index: 1;
width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
/* Танки на иконках Lesta смотрят влево — зеркалим левого бойца, чтобы оба
"смотрели" друг на друга, а не в одну сторону. Ширина задана в 100% от
узкой колонки, а не от бокса высотой — так обрезка при увеличении идёт
по бокам (танк шире, чем высок), а не сверху/снизу. */
transform: scale(1.25);
}
.versus-side-left .versus-img img { transform: scale(1.25) scaleX(-1); }
.versus-name {
font-size: 12.6px;
color: var(--text);
text-align: center;
line-height: 1.25;
max-width: 100%;
padding: 0 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.versus-tier {
font-size: 12.1px;
font-weight: 700;
color: var(--muted);
padding-bottom: 8px;
}
.versus-vs {
align-self: center;
font-size: 16px;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.02em;
padding: 0 8px;
}
.versus-cta {
position: relative;
display: block;
overflow: hidden;
margin: 10px 16px 14px;
padding: 8px;
border: 1px solid rgba(255, 201, 77, 0.75);
border-radius: var(--radius-pill);
background: rgba(10, 14, 11, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--accent);
font-size: 12.5px;
font-weight: 700;
text-align: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.versus-widget:hover .versus-cta {
background: var(--accent-grad);
border-color: transparent;
color: var(--accent-ink);
}
.versus-cta::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
transform: skewX(-20deg);
opacity: 0;
pointer-events: none;
}
.versus-widget:hover .versus-cta::after {
opacity: 1;
animation: versus-cta-shine 0.9s ease;
}
@keyframes versus-cta-shine {
0% { left: -60%; opacity: 1; }
100% { left: 130%; opacity: 0; }
}
@media (max-width: 760px), (max-width: 1000px) and (max-height: 520px) {
.versus-widget {
min-height: 140px;
background-position: 15% 75%;
}
.versus-widget .sidebar-widget-title { padding: 10px 14px 0; }
.versus-img { height: 68px; }
.versus-row { margin-top: 4px; }
.versus-cta { margin: 6px 14px 10px; padding: 6px; }
}
/* Ads */
.ad-card {
display: block;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid rgba(255, 180, 84, 0.3);
text-decoration: none;
background: var(--surface);
transition: border-color 0.2s ease, transform 0.2s ease;
}
.ad-card:hover {
border-color: var(--ad);
border-left: 3px solid var(--accent);
}
.ad-card img {
width: 100%;
display: block;
}
.ad-card .ad-label {
display: block;
padding: 7px 12px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ad);
background: rgba(255, 180, 84, 0.1);
}
.feed .ad-card { margin: 2px 0; }
/* Просмотр фото на весь экран */
.tg-media img { cursor: zoom-in; }
.lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 100;
background: rgba(5, 6, 8, 0.94);
align-items: center;
justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-img {
max-width: min(92vw, 900px);
max-height: 88vh;
object-fit: contain;
border-radius: var(--radius-sm);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
position: absolute;
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--border-strong);
color: var(--text);
border-radius: var(--radius-sm);
width: 44px;
height: 44px;
font-size: 23px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255, 255, 255, 0.16); }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox-close { top: 12px; right: 12px; }
}
/* Новости со сторонних сайтов (агрегатор — только заголовок/анонс/ссылка) */
.news-source-hint {
color: var(--muted);
font-size: 14.4px;
margin: 0 0 16px;
}
.news-source-hint a { color: var(--accent); text-decoration: none; }
.news-source-hint a:hover { text-decoration: underline; }
.news-card {
display: block;
max-width: 520px;
background: var(--surface);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
overflow: hidden;
text-decoration: none;
color: var(--text);
transition: border-color 0.2s ease, transform 0.2s ease;
}
.news-card:hover {
border-color: var(--border);
border-left: 3px solid var(--accent);
}
.news-card-img {
width: 100%;
max-height: 280px;
object-fit: cover;
display: block;
}
.news-card-body {
padding: 14px 16px;
}
.news-card-title {
font-size: 18.4px;
font-weight: 700;
line-height: 1.35;
margin-bottom: 6px;
}
.news-card-excerpt {
font-size: 15.5px;
color: var(--muted);
line-height: 1.5;
}
.news-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--border);
font-size: 13.2px;
color: var(--muted);
}
.news-card-source { color: var(--ad); font-weight: 700; }
.article-page {
max-width: 640px;
background: var(--surface);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
overflow: hidden;
}
.article-page-img {
width: 100%;
max-height: 400px;
object-fit: cover;
display: block;
}
.article-page-body {
padding: 24px;
}
.article-page-title {
font-size: 27.6px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 8px;
text-transform: none;
}
.article-page-date {
color: var(--muted);
font-size: 15px;
margin-bottom: 18px;
}
.article-page-excerpt {
font-size: 18.4px;
line-height: 1.6;
color: #d3d5da;
margin: 0 0 24px;
}
.article-page-source-btn {
display: inline-block;
padding: 12px 20px;
border-radius: var(--radius-sm);
background: var(--ad);
color: #2a1500;
text-decoration: none;
font-size: 16.1px;
font-weight: 700;
transition: filter 0.15s ease;
}
.article-page-source-btn:hover { filter: brightness(1.08); }
/* ============================================================
АНГАР-ГИБРИД: стеклянные панели, свечения и HUD-акценты.
Блок сознательно в конце файла — переопределяет базовые заливки
карточек на «стекло» из оверлеев ангара, не трогая раскладку.
============================================================ */
.achievement-card,
.vehicle-list,
.list-card,
.tank-detail {
background-color: rgba(18, 24, 20, 0.88);
background-image: var(--glass);
background-size: auto;
}
/* Числа-показатели — моноширинные цифры HUD */
.metric-card strong,
.vehicle-stat-col strong,
.stat-tile-value,
.achievement-count {
font-variant-numeric: tabular-nums;
}
/* Кнопки-действия: лёгкое свечение при наведении, как элементы ангара */
.load-more-btn:hover,
.hero-btn-accent:hover:not(:disabled) {
box-shadow: 0 0 18px rgba(255, 201, 77, 0.35);
}
/* Шапка профиля игрока — из сине-фиолетовой в палитру ангара */
.profile-hero {
border-radius: var(--radius);
border: 1px solid var(--line);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}
.profile-hero-banner {
background:
radial-gradient(70% 120% at 18% 0%, rgba(73, 243, 214, 0.10), transparent 60%),
radial-gradient(60% 100% at 85% 10%, rgba(255, 201, 77, 0.12), transparent 65%),
linear-gradient(135deg, #131c16 0%, #18231c 45%, #101712 100%);
}
/* Живая полоска-акцент сверху баннера, как кромка карточек сравнения */
.profile-hero-banner::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0.8;
}
/* Скролл-бары в тон панелей */
html { scrollbar-color: #2a352d transparent; }
::-webkit-scrollbar-thumb { background: #2a352d; border-radius: 8px; }
/* Панель действий на странице «Техника» — промо-карточки в духе ангара */
.vehicle-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 16px;
}
@media (max-width: 560px) {
.vehicle-actions { grid-template-columns: 1fr; }
}
.vehicle-action-card {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border-radius: var(--radius);
border: 1px solid var(--line);
background-color: rgba(18, 24, 20, 0.88);
background-image: var(--glass);
color: var(--text);
font-family: inherit;
text-align: left;
cursor: pointer;
overflow: hidden;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.vehicle-action-card::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: var(--vac-accent, var(--accent));
opacity: 0.85;
}
.vehicle-action-compare { --vac-accent: linear-gradient(90deg, #4db5ff, transparent 60%); }
.vehicle-action-rating { --vac-accent: linear-gradient(90deg, var(--cyan), transparent 60%); }
.vehicle-action-card:hover {
border-color: var(--border-strong);
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.vehicle-action-card .vac-icon {
width: 44px;
height: 44px;
flex: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--line-soft);
color: var(--cyan);
}
.vehicle-action-compare .vac-icon { color: #4db5ff; }
.vehicle-action-card .vac-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vehicle-action-card .vac-text b {
font-family: "Inter", sans-serif;
font-size: 15.5px;
font-weight: 800;
letter-spacing: -0.01em;
}
.vehicle-action-card .vac-text small { font-size: 13px; color: var(--muted); }
/* Страница профиля шире обычной: таблице техники в духе ангара нужно место */
.profile-layout {
max-width: 1340px;
grid-template-columns: minmax(0, 1fr) 260px;
}
@media (max-width: 900px) {
.profile-layout { grid-template-columns: 1fr; }
}
/* Дети ленты не сжимаются под max-height контейнера: у карточек с
overflow:hidden (новости) min-height иначе схлопывается до нуля и весь
список превращается в стопку полосок. Прокрутка — задача контейнера. */
.feed > * { flex-shrink: 0; }
/* ============================================================
АРТ-СЛОЙ (по референсам lebwa.tv / tanksblitz.ru):
hero-полоса страницы с размытым игровым артом, карточки техники
с флагами наций, новости image-first сеткой.
============================================================ */
/* --- Hero-полоса страницы: арт на всю ширину + крупный заголовок --- */
.page-hero {
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--line-soft);
}
.page-hero::before {
content: '';
position: absolute;
inset: 0;
background: var(--hero-img, url('/backgrounds/hangar-bg.webp')) center 32% / cover no-repeat;
filter: blur(7px) saturate(1.15) brightness(0.85);
transform: scale(1.08);
}
.page-hero::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(90% 140% at 15% 0%, rgba(255, 201, 77, 0.10), transparent 55%),
linear-gradient(180deg, rgba(11, 16, 13, 0.42) 0%, rgba(11, 16, 13, 0.66) 55%, var(--bg) 100%);
}
.page-hero-inner {
position: relative;
z-index: 1;
max-width: 1180px;
margin: 0 auto;
padding: 16px 24px 14px;
}
.page-hero-crumb {
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--accent);
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.page-hero-title {
margin: 3px 0 0;
font-size: clamp(20px, 2.8vw, 26px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
color: #fff;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.page-hero-sub {
margin: 4px 0 0;
max-width: 620px;
font-size: 13px;
line-height: 1.4;
color: rgba(238, 243, 238, 0.82);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
@media (max-width: 700px) {
.page-hero-inner { padding: 14px 20px 12px; }
}
/* Профильная страница: узкая версия полосы (профиль несёт свой hero ниже) */
.page-hero--slim .page-hero-inner { padding: 18px 24px 16px; }
.page-hero--slim .page-hero-title { font-size: clamp(20px, 2.6vw, 25px); }
/* Игровые экраны (/compare, /rating): полоса в одну строку — экран под ней
рассчитан на «сколько влезло в окно», и высокая шапка съедала бы его */
.page-hero--compact .page-hero-inner {
padding: 13px 24px 12px;
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
.page-hero--compact .page-hero-title { margin: 0; font-size: clamp(19px, 2.4vw, 24px); }
.page-hero--compact .page-hero-crumb { order: 2; }
.page-hero--compact .page-hero-sub {
order: 3;
margin: 0;
max-width: none;
font-size: 13px;
}
@media (max-width: 860px) {
.page-hero--compact .page-hero-crumb,
.page-hero--compact .page-hero-sub { display: none; }
}
/* Кнопка-ссылка в полосе заголовка (вход в разбор обновления с /compare).
Уезжает вправо и живёт в той же строке, чтобы шапка не подрастала;
на узких экранах, где подпись прячется, кнопка остаётся. */
.page-hero-cta {
order: 4;
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: var(--radius-sm);
border: 1px solid rgba(255, 201, 77, 0.4);
background: rgba(255, 201, 77, 0.1);
color: var(--text);
font-size: 12.5px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.page-hero-cta:hover {
border-color: rgba(255, 201, 77, 0.75);
background: rgba(255, 201, 77, 0.16);
transform: translateY(-1px);
}
.page-hero-cta-tag {
padding: 2px 7px;
border-radius: 999px;
background: var(--accent);
color: var(--accent-ink);
font-size: 9.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.page-hero-cta-arrow { color: var(--accent); font-weight: 800; }
@media (max-width: 700px) {
.page-hero-cta { font-size: 12px; padding: 5px 10px; white-space: normal; }
}
/* --- Карточка танка с флагом нации (как слоты карусели в ангаре игры) --- */
.tank-card { overflow: hidden; }
.tank-card-flag {
position: absolute;
left: 0;
top: 0;
width: 130%;
height: auto;
opacity: 0.5;
z-index: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(150deg, #000 15%, rgba(0, 0, 0, 0.35) 55%, transparent 85%);
mask-image: linear-gradient(150deg, #000 15%, rgba(0, 0, 0, 0.35) 55%, transparent 85%);
transition: opacity 0.2s ease;
}
.tank-card:hover .tank-card-flag { opacity: 0.7; }
.tank-card > *:not(.tank-card-flag) { position: relative; z-index: 1; }
.tank-card-name { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
/* --- Новости image-first сеткой (как карточки-баннеры tanksblitz.ru) --- */
.news-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
@media (max-width: 980px) {
.news-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.news-grid { grid-template-columns: 1fr; }
}
.news-grid .news-card {
max-width: none;
display: flex;
flex-direction: column;
border-radius: var(--radius);
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.news-grid .news-card:hover {
border-color: rgba(255, 201, 77, 0.35);
border-left: 1px solid rgba(255, 201, 77, 0.35);
transform: translateY(-3px);
box-shadow: var(--shadow-2);
}
.news-grid .news-card-img {
aspect-ratio: 16 / 9;
max-height: none;
object-fit: cover;
}
.news-grid .news-card-body { display: flex; flex-direction: column; flex: 1; }
.news-grid .news-card-footer { margin-top: auto; padding-top: 12px; }
/* --- Баннеры действий на «Технике»: игровой арт под стеклом --- */
.vehicle-action-card { min-height: 96px; }
.vehicle-action-card::after {
content: '';
position: absolute;
inset: 0;
background: url('/backgrounds/hangar-bg.webp') var(--vac-pos, right -60px center) / 420px auto no-repeat;
opacity: 0.22;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
transition: opacity 0.2s ease;
}
.vehicle-action-rating::after { --vac-pos: right -140px center; }
.vehicle-action-card:hover::after { opacity: 0.38; }
.vehicle-action-card > * { position: relative; z-index: 1; }
/* Блок над подвалом — в той же ширине, что и подвал. Высоту задаёт размер
места, выбранный в админке (см. .ad-code.ad-size-*), поэтому здесь только
ширина и отступы; min-height нет — иначе пустой слот держит дыру. */
.footer-ad-slot {
max-width: 1180px;
margin: 24px auto 0;
padding: 0 24px;
}
/* ===== Футер сайта ===== */
.site-footer {
margin-top: auto;
border-top: 1px solid var(--line, var(--border));
background: linear-gradient(180deg, rgba(10, 14, 12, 0.6), rgba(8, 11, 9, 0.95));
box-shadow: 0 -1px 0 rgba(255, 201, 77, 0.18);
color: var(--text-dim);
font-size: 14px;
text-align: left;
}
/* Раньше это была многострочная сетка с подписанными колонками — с одной
ссылкой на колонку заголовки только съедали высоту без пользы. Теперь
всё (ссылки, копирайт) — один компактный ряд, на узких экранах
переносится в несколько строк сам за счёт flex-wrap. */
.site-footer-inner {
max-width: 1180px;
margin: 0 auto;
padding: 18px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px 28px;
flex-wrap: wrap;
}
.footer-links-flat {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
font-size: 13.5px;
}
.footer-links-flat a {
color: var(--text-dim);
text-decoration: none;
transition: color 0.15s ease;
}
.footer-links-flat a:hover {
color: var(--text);
}
.footer-copy {
font-size: 12.5px;
color: var(--text-faint);
white-space: nowrap;
}
/* Телефон: ссылки и копирайт по левому краю, одним компактным блоком
вместо широкого ряда. */
@media (max-width: 640px) {
.site-footer { font-size: 12.5px; }
.site-footer-inner {
padding: 14px 16px;
gap: 10px 16px;
}
.footer-links-flat { gap: 6px 14px; font-size: 12px; }
.footer-copy { font-size: 11px; width: 100%; white-space: normal; }
}
/* ===== Реклама: форматы (переопределяет базовые .ad-card выше) ===== */
/* Креатив кодом (сторонняя рекламная сеть) — без своей рамки/фона, сеть сама
стилизует то, что отрисует внутрь. Размер решает сама сеть (адаптивный
баннер тянется на всю ширину контейнера), поэтому в сайдбаре и ленте
ограничиваем ширину привычным размером рекламного места — иначе на
телефоне, где колонка сайдбара становится на всю ширину экрана, баннер
раздувается вслед за ней и выглядит как «не туда попал».
width: 100% обязателен: контейнеры мест (.sidebar-ads и лента) — flex, а
`margin: 0 auto` отменяет растягивание flex-элемента, и блок схлопывается
в нулевую ширину. Рекламная сеть (РСЯ и др.) в контейнер нулевой ширины
ничего не рисует — место выглядит пустым. */
.ad-code { position: relative; }
/* Ограничение высоты для кода сети: сама сеть отдаёт креатив какой захочет,
поэтому режем контейнером по выбранному в админке размеру места. Классы
.ad-size-* совпадают с ключами sizes в ad-formats.js (codeSizes: true) —
значения maxH оттуда просто продублированы здесь в px, т.к. CSS не может
прочитать JS-объект. */
.ad-code.ad-size-strip { max-height: 100px; overflow: hidden; }
.ad-code.ad-size-banner { max-height: 250px; overflow: hidden; }
.ad-code.ad-size-billboard { max-height: 400px; overflow: hidden; }
.ad-code.ad-size-leaderboard { max-height: 120px; overflow: hidden; }
.ad-code.ad-size-card { max-height: 400px; overflow: hidden; }
.ad-code.ad-size-rect { max-height: 250px; overflow: hidden; }
.ad-code.ad-size-square { max-height: 300px; overflow: hidden; }
.ad-code.ad-size-tall { max-height: 600px; overflow: hidden; }
.ad-code.ad-sidebar,
.ad-code.ad-feed { width: 100%; max-width: 336px; margin: 0 auto; }
.ad-card {
position: relative;
display: block;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid rgba(255, 201, 77, 0.22);
text-decoration: none;
color: var(--text);
background: var(--surface);
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ad-card:hover {
border-color: rgba(255, 201, 77, 0.6);
border-left: 1px solid rgba(255, 201, 77, 0.6);
transform: translateY(-1px);
box-shadow: var(--shadow-2);
}
.ad-media {
position: relative;
display: block;
width: 100%;
background: #0d110f;
}
.ad-media img,
.ad-card > img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.ad-label {
display: inline-block;
padding: 3px 8px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ad);
background: rgba(20, 16, 4, 0.72);
border: 1px solid rgba(255, 201, 77, 0.35);
border-radius: 4px;
line-height: 1.3;
backdrop-filter: blur(4px);
}
.ad-label-float {
position: absolute;
top: 8px;
left: 8px;
z-index: 1;
}
.ad-caption {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 12px;
padding: 10px 14px;
background: linear-gradient(180deg, rgba(255, 201, 77, 0.06), rgba(255, 201, 77, 0.02));
border-top: 1px solid rgba(255, 201, 77, 0.15);
}
.ad-caption-title { font-weight: 700; font-size: 14.5px; }
.ad-caption-text { flex-basis: 100%; color: var(--text-dim); font-size: 13px; line-height: 1.4; }
.ad-caption-cta {
margin-left: auto;
padding: 6px 12px;
border-radius: 5px;
font-size: 12.5px;
font-weight: 700;
color: var(--accent-ink);
background: var(--accent-grad);
white-space: nowrap;
}
/* Пропорции по формату: картинка обрезается по object-fit, поэтому даже
огромные креативы держат заданную высоту */
.ad-size-billboard .ad-media { aspect-ratio: 4 / 1; }
.ad-size-leaderboard .ad-media { aspect-ratio: 8 / 1; }
.ad-size-card .ad-media { aspect-ratio: 16 / 9; }
.ad-size-strip.ad-feed .ad-media { aspect-ratio: 5 / 1; }
.ad-size-rect .ad-media { aspect-ratio: 6 / 5; }
.ad-size-square .ad-media { aspect-ratio: 1 / 1; }
.ad-size-tall .ad-media { aspect-ratio: 1 / 2; }
.ad-size-strip.ad-sidebar .ad-media { aspect-ratio: 3 / 1; }
/* Нативный формат — миниатюра слева, текст справа */
.ad-size-native {
display: flex;
gap: 14px;
padding: 12px;
align-items: center;
}
.ad-native-thumb {
flex: 0 0 96px;
width: 96px;
height: 96px;
border-radius: var(--radius-sm);
overflow: hidden;
background: #0d110f;
}
.ad-native-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-native-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.ad-native-body .ad-label { align-self: flex-start; }
.ad-native-headline { font-weight: 700; font-size: 15px; line-height: 1.3; }
.ad-native-text {
color: var(--text-dim);
font-size: 13px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ad-native-cta {
margin-top: 4px;
align-self: flex-start;
padding: 5px 11px;
border-radius: 5px;
font-size: 12px;
font-weight: 700;
color: var(--accent-ink);
background: var(--accent-grad);
}
.ad-sidebar.ad-size-native { flex-direction: column; align-items: stretch; }
.ad-sidebar.ad-size-native .ad-native-thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; flex-basis: auto; }
/* Верхний баннер над контентом */
.top-ad {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
.top-ad.has-ad { padding-top: 22px; margin-bottom: -8px; }
.top-ad .ad-card { max-height: 300px; }
@media (max-width: 760px), (max-width: 1000px) and (max-height: 520px) {
.top-ad { padding: 0 6px; }
.ad-size-billboard .ad-media { aspect-ratio: 2.5 / 1; }
.ad-size-leaderboard .ad-media { aspect-ratio: 4 / 1; }
/* Отдельный размер для мобильных (задаётся в админке, необязателен) —
.ad-size-m-* стоит в разметке рядом с десктопным .ad-size-*, здесь
перебивает его на узких экранах: пропорцию картинки для .ad-card,
потолок высоты для .ad-code. Без своего правила под классом ad-size-m-*
ничего бы не изменилось — сам класс без стилей ни на что не влияет. */
.ad-size-m-billboard .ad-media { aspect-ratio: 4 / 1; }
.ad-size-m-leaderboard .ad-media { aspect-ratio: 8 / 1; }
.ad-size-m-card .ad-media { aspect-ratio: 16 / 9; }
.ad-size-m-rect .ad-media { aspect-ratio: 6 / 5; }
.ad-size-m-square .ad-media { aspect-ratio: 1 / 1; }
.ad-size-m-tall .ad-media { aspect-ratio: 1 / 2; }
.ad-size-m-strip.ad-feed .ad-media { aspect-ratio: 5 / 1; }
.ad-size-m-strip.ad-sidebar .ad-media { aspect-ratio: 3 / 1; }
.ad-code.ad-size-m-code { max-height: none; }
.ad-code.ad-size-m-strip { max-height: 100px; }
.ad-code.ad-size-m-banner { max-height: 250px; }
.ad-code.ad-size-m-billboard { max-height: 400px; }
.ad-code.ad-size-m-leaderboard { max-height: 120px; }
.ad-code.ad-size-m-card { max-height: 400px; }
.ad-code.ad-size-m-rect { max-height: 250px; }
.ad-code.ad-size-m-square { max-height: 300px; }
.ad-code.ad-size-m-tall { max-height: 600px; }
}
.feed .ad-card { margin: 2px 0; }
/* Липкая полоса снизу: поверх контента, над нижним таб-баром на мобиле */
.sticky-ad-bar {
position: fixed;
left: 0;
right: 0;
bottom: var(--bottom-tabs-h, 0px);
z-index: 45;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
background: linear-gradient(180deg, rgba(10, 14, 12, 0.94), var(--bg));
border-top: 1px solid var(--line);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* "Липкая" полоса по смыслу — тонкая, а код-объявление (адаптивный баннер
сети) сам решает свою высоту и, если её не ограничить, спокойно раздувает
весь фикс-бар на весь экран. Формат под названием "плавающий"/"floor ad"
в Яндексе для этого места вообще не подходит — сюда только баннер. */
max-height: 120px;
overflow: hidden;
/* Если скрипт сети сам ставит внутри position:fixed (некоторые форматы так
и делают, что и раздувало полосу раньше) — transform на этом контейнере
делает его точкой отсчёта для такого fixed-потомка, и overflow: hidden
выше реально его обрежет, а не пропустит поверх всего экрана. */
transform: translateZ(0);
}
.sticky-ad-bar .ad-card { flex: 1 1 auto; min-width: 0; border: none; }
.sticky-ad-bar .ad-card:hover { transform: none; box-shadow: none; }
.sticky-ad-bar .ad-code { flex: 1 1 auto; min-width: 0; max-height: 100px; overflow: hidden; }
.sticky-ad-bar .ad-size-bar .ad-media { aspect-ratio: unset; height: 50px; }
@media (min-width: 640px) {
.sticky-ad-bar { max-height: 160px; }
.sticky-ad-bar .ad-code { max-height: 140px; }
.sticky-ad-bar .ad-size-bar .ad-media { height: 90px; }
}
.sticky-ad-close {
flex: 0 0 auto;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.06);
color: var(--text-dim);
font-size: 14px;
line-height: 1;
cursor: pointer;
}
.sticky-ad-close:hover { color: var(--text); border-color: var(--border-strong); }
/* ===== Кастомные блоки конструктора главной ===== */
.feed-top-blocks:empty { display: none; }
.feed-top-blocks { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.custom-block-banner { padding: 0; background: none; border: none; box-shadow: none; }
.custom-banner {
position: relative;
display: flex;
flex-direction: column;
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
color: var(--text);
border: 1px solid var(--line-soft);
background-color: rgba(18, 24, 20, 0.88);
background-image: var(--glass);
box-shadow: var(--shadow-1);
transition: transform 0.2s ease, border-color 0.2s ease;
}
a.custom-banner:hover { transform: translateY(-2px); border-color: rgba(255, 201, 77, 0.45); }
.custom-banner-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.custom-banner-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.custom-banner-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; }
.custom-banner-tag {
align-self: flex-start;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
}
.custom-banner-title { font-family: "Oswald", "Inter", sans-serif; font-size: 20px; font-weight: 600; line-height: 1.15; text-transform: uppercase; }
.custom-banner-text { color: var(--text-dim); font-size: 13.5px; line-height: 1.45; }
.custom-banner-cta {
align-self: flex-start;
margin-top: 6px;
padding: 8px 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
color: var(--accent-ink);
background: var(--accent-grad);
}
.custom-banner-accent { background: linear-gradient(135deg, rgba(255, 201, 77, 0.22), rgba(255, 201, 77, 0.04)); border-color: rgba(255, 201, 77, 0.35); }
.custom-banner-image {
min-height: 200px;
justify-content: flex-end;
background-image: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(8, 12, 10, 0.92) 100%), var(--banner-img);
background-size: cover;
background-position: center;
}
.custom-banner-image .custom-banner-media { display: none; }
.custom-text-body { color: var(--text-dim); font-size: 14px; line-height: 1.55; }
.custom-text-body p { margin: 0 0 8px; }
.custom-text-body p:last-child { margin-bottom: 0; }
.custom-text-body a { color: var(--accent); }
.custom-links { display: flex; flex-direction: column; gap: 6px; }
.custom-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line-soft);
color: var(--text);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: background 0.15s ease, border-color 0.15s ease;
}
.custom-link:hover { background: rgba(255, 201, 77, 0.08); border-color: rgba(255, 201, 77, 0.35); }
.custom-link-icon { font-size: 16px; width: 22px; text-align: center; }
.custom-link-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-link-arrow { color: var(--muted); font-size: 18px; line-height: 1; }
/* Страница /legal — простой текстовый документ без ленты/сайдбара,
поэтому вместо .layout берём собственный узкий центрированный контейнер. */
.legal-page {
max-width: 760px;
margin: 0 auto;
padding: 30px 24px 70px;
}
@media (max-width: 760px), (max-width: 1000px) and (max-height: 520px) {
.legal-page { padding: 22px 6px 70px; }
}
.legal-toc {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
padding-bottom: 20px;
margin-bottom: 26px;
border-bottom: 1px solid var(--line-soft);
}
.legal-toc a {
color: var(--muted);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: color 0.15s ease;
}
.legal-toc a:hover { color: var(--accent); }
.legal-doc {
margin-bottom: 44px;
padding-bottom: 36px;
border-bottom: 1px solid var(--line-soft);
/* Якоря из оглавления ведут на article; шапка липкая — оставляем под неё место. */
scroll-margin-top: 130px;
}
.legal-doc:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.legal-doc h2 {
font-size: 22px;
font-weight: 700;
color: var(--text);
margin: 0 0 14px;
}
.legal-doc h3 {
font-size: 15.5px;
font-weight: 700;
color: var(--text);
margin: 22px 0 8px;
}
.legal-doc p,
.legal-doc li {
color: var(--text-dim);
font-size: 15px;
line-height: 1.6;
}
.legal-doc p { margin: 0 0 12px; }
.legal-doc p:last-child { margin-bottom: 0; }
.legal-doc ul {
margin: 0 0 12px;
padding-left: 22px;
}
.legal-doc li { margin-bottom: 5px; }
.legal-doc li::marker { color: var(--accent); }
.legal-doc b { color: var(--text); font-weight: 600; }
.legal-doc a { color: var(--accent); }
/* ---- Обратная связь: плавающая кнопка + модалка ---- */
.feedback-fab {
position: fixed;
right: 18px;
bottom: 18px;
/* body > * задаёт width:100% всем прямым детям body — кнопке нужна своя ширина */
width: auto;
z-index: 150;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: var(--radius);
border: 1px solid var(--border-strong);
background: linear-gradient(180deg, #1c2420, #151b17);
color: var(--text);
font: 600 13.5px/1 'Inter', sans-serif;
cursor: pointer;
box-shadow: var(--shadow-2);
transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.feedback-fab:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.feedback-fab svg { width: 17px; height: 17px; flex-shrink: 0; }
/* Подписи лежат друг на друге в одной ячейке грида: ширина кнопки берётся по
самой длинной, поэтому при смене текста шапка не дёргается — меняется
только прозрачность. */
.feedback-fab .fab-rotator { display: grid; }
.feedback-fab .fab-rotator i {
grid-area: 1 / 1;
font-style: normal;
white-space: nowrap;
opacity: 0;
transition: opacity 0.35s ease;
}
.feedback-fab .fab-rotator i.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.feedback-fab .fab-rotator i { transition: none; }
}
/* В потоке подвала, справа от копирайта: ни фиксации, ни тени — рядом с
документами и контактами это такой же элемент подвала, а не всплывашка. */
.feedback-fab--footer {
position: static;
z-index: auto;
margin-left: auto;
padding: 8px 12px;
box-shadow: none;
font-size: 13px;
}
.feedback-fab--footer:hover { transform: none; }
/* Тот же вид, но в потоке шапки: ни фиксации, ни тени — рядом с кнопкой входа
она должна читаться как соседний элемент панели, а не как всплывашка. */
.feedback-fab--inline {
position: static;
z-index: auto;
margin-left: auto;
padding: 8px 12px;
box-shadow: none;
font-size: 13px;
}
.feedback-fab--inline:hover { transform: none; }
/* ---- Кнопка «наверх» ------------------------------------------------------
Скрыта до тех пор, пока не отмотали вниз (класс is-on вешает скрипт):
держим её в потоке невидимой, чтобы появление было плавным, а не рывком. */
.scroll-top {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 140;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--border-strong);
background: linear-gradient(180deg, #1c2420, #151b17);
color: var(--text-dim);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
box-shadow: var(--shadow-2);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s, border-color 0.15s ease, color 0.15s ease;
}
.scroll-top.is-on {
opacity: 1;
visibility: visible;
transform: none;
}
.scroll-top:hover { border-color: var(--accent); color: var(--accent); }
.scroll-top svg { width: 19px; height: 19px; }
@media (max-width: 640px) {
/* Над нижним таб-баром, а не под ним. */
.scroll-top {
right: 12px;
bottom: calc(var(--bottom-tabs-h, 0px) + 12px);
width: 40px;
height: 40px;
}
}
/* Шапка едет вверх при прокрутке вниз (см. initHeaderAutoHide в script.js).
Высоту, на которую ориентируются липкие полосы страниц, обнуляем — иначе
под уехавшей шапкой остаётся её же пустое место. */
@media (max-width: 640px) {
.site-header {
transition: transform 0.22s ease;
will-change: transform;
}
html.header-hidden .site-header { transform: translateY(-100%); }
html.header-hidden { --site-header-h: 0px !important; }
.feedback-fab--inline { margin-left: 0; padding: 8px; }
/* На телефоне копирайт занимает всю строку — кнопка встаёт под ним слева,
иначе её выносит в третий ряд. */
.feedback-fab--footer { margin-left: 0; padding: 8px 10px; font-size: 12px; }
}
@media (max-width: 640px) {
.feedback-fab { right: 12px; bottom: 12px; padding: 10px; }
.feedback-fab span { display: none; }
}
.feedback-panel { max-width: 560px; }
.fb-head { margin-bottom: 16px; padding-right: 36px; }
.fb-sub { margin: 6px 0 0; font-size: 13.4px; color: var(--muted); line-height: 1.5; }
.fb-form { display: flex; flex-direction: column; gap: 14px; }
.fb-field { display: flex; flex-direction: column; gap: 6px; }
.fb-label { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.fb-req { color: var(--accent); }
.fb-hint { font-weight: 400; color: var(--text-faint); }
.fb-input {
width: 100%;
padding: 10px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-deep);
color: var(--text);
font: 400 14px/1.5 'Inter', sans-serif;
}
.fb-input:focus { outline: none; border-color: var(--accent); }
.fb-textarea { resize: vertical; min-height: 110px; }
.fb-counter { align-self: flex-end; font-size: 11.5px; color: var(--text-faint); }
.fb-drop {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 16px;
border: 1px dashed var(--border-strong);
border-radius: var(--radius-sm);
color: var(--muted);
font-size: 13px;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.fb-drop:hover, .fb-drop.is-over { border-color: var(--accent); color: var(--accent); }
.fb-previews { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-preview { position: relative; width: 76px; height: 76px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.fb-preview img { width: 100%; height: 100%; object-fit: cover; }
.fb-preview-del {
position: absolute;
top: 2px;
right: 2px;
width: 20px;
height: 20px;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: 11px;
line-height: 1;
cursor: pointer;
}
.fb-preview-del:hover { background: var(--accent); color: var(--accent-ink); }
.fb-error { font-size: 13px; color: #ff8f8f; }
.fb-actions { display: flex; justify-content: flex-end; gap: 10px; }
.fb-btn {
padding: 10px 18px;
border: 1px solid var(--accent);
border-radius: var(--radius-sm);
background: var(--accent);
color: var(--accent-ink);
font: 700 14px/1 'Inter', sans-serif;
cursor: pointer;
}
.fb-btn:disabled { opacity: 0.6; cursor: default; }
.fb-btn-ghost {
padding: 10px 16px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted);
font: 600 14px/1 'Inter', sans-serif;
cursor: pointer;
}
.fb-btn-ghost:hover { color: var(--text); border-color: var(--border-strong); }
.fb-success { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 14px 0 4px; }
.fb-success-mark {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(143, 209, 63, 0.15);
color: var(--green);
font-size: 22px;
}
/* ---- Нижний таб-бар (вариант 2a) ----------------------------------------- */
.bottom-tabs { display: none; }
@media (max-width: 640px) {
.bottom-tabs {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
display: flex;
align-items: stretch;
padding: 8px 2px calc(10px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--line);
background: linear-gradient(180deg, rgba(10, 14, 12, 0.92), var(--bg));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* В iOS Safari адресная строка снизу плавает поверх страницы, а fixed-элемент
садится над ней — между таб-баром и краем экрана остаётся полоса, сквозь
которую просвечивает прокручиваемый контент. safe-area-inset-bottom там
равен нулю (низ занят баром браузера, а не home-индикатором), поэтому
паддинг эту полосу не закрывает. Закрываем её фоном, продлённым за край.
Заглушка — отдельный элемент рядом с баром, а не его псевдоэлемент, хотя
закрывает ровно ту же полосу. У бара backdrop-filter, а он в Safari не
просто заводит новый containing block (об этом уже знает
.vehicles-toolbar выше) — он ещё и срезает всё, что вылезает за рамку
элемента. Поэтому прежний ::after у бара с top: 100% на айфоне не
рисовался вовсе: в Chrome фикс работал, в Safari его не существовало.
Псевдоэлемент body тоже не подходит — body::after занят затемнением
фоновой картинки (см. верх файла). */
.bottom-tabs-fill {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 200px;
/* Ровно под нижним краем окна: полоса, о которой речь, лежит там же, где
и «за краем» для fixed-элемента. */
transform: translateY(100%);
background: var(--bg);
z-index: 49;
pointer-events: none;
}
.bottom-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 6px 0;
border: none;
background: none;
font: inherit;
/* Семь подписей в ряд на 375 px — по 53 px на кнопку, поэтому шрифт мельче
обычного и слово не переносится. */
font-size: 9px;
letter-spacing: -0.01em;
font-weight: 600;
white-space: nowrap;
color: var(--text-faint);
text-decoration: none;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.bottom-tab-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
.bottom-tab svg { width: 20px; height: 20px; }
.bottom-tab.active { color: var(--accent); font-weight: 700; }
/* Профиль — центральная кнопка: приподнятый янтарный кружок. Это главное
действие бара, поэтому оно и выглядит иначе, а не как ещё одна иконка. */
.bottom-tab-center { color: var(--text); }
.bottom-tab-center .bottom-tab-icon {
width: 46px;
height: 46px;
/* Кружок на 26 px выше обычной иконки — вычитаем эту разницу отрицательными
отступами, иначе подпись «Профиль» уезжала бы вверх относительно соседей. */
margin-top: -20px;
margin-bottom: -6px;
border-radius: 50%;
background: var(--accent-grad);
color: var(--accent-ink);
border: 3px solid var(--bg);
box-shadow: 0 6px 18px rgba(255, 201, 77, 0.35);
}
.bottom-tab-center svg { width: 22px; height: 22px; }
.bottom-tab-center.active { color: var(--accent); }
/* Панель «Ещё» на телефоне — лист снизу, у самой кнопки, а не под шапкой
на другом конце экрана. */
body.has-bottom-tabs .nav-menu-toggle { display: none; }
body.has-bottom-tabs .nav-more-panel.nav-open {
position: fixed;
left: 0;
right: 0;
bottom: var(--bottom-tabs-h, 72px);
z-index: 49;
max-height: 60vh;
overflow-y: auto;
/* Лист приподнят над баром скруглённой кромкой и стеклом того же замеса,
что и сам бар, — иначе он читался как обрезанный кусок страницы. */
padding: 8px 10px 12px;
border: 1px solid var(--line);
border-bottom: 0;
border-radius: var(--bevel) var(--bevel) 0 0;
background: linear-gradient(180deg, rgba(28, 36, 32, 0.97), rgba(10, 14, 12, 0.98));
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
animation: navSheetIn 0.18s ease-out;
}
/* Полоска-«ручка»: привычный знак «это лист снизу». Липкая, чтобы не уезжала
при прокрутке длинного списка в «Ещё». */
body.has-bottom-tabs .nav-more-panel.nav-open::before {
content: '';
position: sticky;
top: 0;
z-index: 1;
display: block;
width: 36px;
height: 4px;
margin: 0 auto 10px;
border-radius: 999px;
background: var(--border-strong);
}
/* Затемнение под листом — только визуальное: клик должен доходить до страницы,
его ловит обработчик «клик мимо панели закрывает её». */
body.has-bottom-tabs .nav-more-panel.nav-open::after {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: rgba(0, 0, 0, 0.45);
animation: navScrimIn 0.18s ease-out;
}
body.has-bottom-tabs .nav-more-panel.nav-open .page-tabs { gap: 4px; padding-bottom: 0; }
/* Пункты — строки-плитки во всю ширину, а не пилюли по центру: ряд одинаковых
карточек читается быстрее, чем текст, висящий в пустоте. */
body.has-bottom-tabs .nav-more-panel.nav-open .page-tab {
padding: 13px 34px 13px 14px;
border-radius: var(--bevel-sm);
font-size: 15px;
color: var(--text);
background: rgba(255, 255, 255, 0.035);
box-shadow: inset 0 0 0 1px var(--line-soft);
}
/* Шеврон справа рисуем углом рамки — панель собирается в JS, тащить туда
иконку ради трёх строк незачем. */
body.has-bottom-tabs .nav-more-panel.nav-open .page-tab::after {
content: '';
position: absolute;
right: 15px;
top: 50%;
width: 7px;
height: 7px;
border-right: 2px solid var(--text-faint);
border-bottom: 2px solid var(--text-faint);
transform: translateY(-50%) rotate(-45deg);
}
body.has-bottom-tabs .nav-more-panel.nav-open .page-tab:active {
background: rgba(255, 255, 255, 0.08);
}
body.has-bottom-tabs .nav-more-panel.nav-open .page-tab.active {
color: var(--accent);
background: rgba(255, 201, 77, 0.12);
box-shadow: inset 0 0 0 1px rgba(255, 201, 77, 0.28), inset 3px 0 0 var(--accent);
}
body.has-bottom-tabs .nav-more-panel.nav-open .page-tab.active::after { border-color: var(--accent); }
/* Лист «Техника» — ангарный HUD: срезанные углы и янтарная кромка как у
панелей в игре, поиск первой строкой, разделы строками с иконками классов. */
.nav-tanks-hud { display: none; }
body.has-bottom-tabs .nav-tanks-hud.nav-open {
position: fixed;
left: 8px;
right: 8px;
bottom: calc(var(--bottom-tabs-h, 72px) + 4px);
z-index: 49;
display: block;
max-height: 66vh;
overflow-y: auto;
padding: 14px 14px 12px;
border: 1px solid rgba(255, 201, 77, 0.22);
clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
background: linear-gradient(180deg, rgba(32, 41, 36, 0.99), rgba(9, 13, 11, 0.99));
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
animation: navSheetIn 0.18s ease-out;
}
/* Янтарная кромка по верхнему срезу — тот же приём, что у панелей в ангаре. */
body.has-bottom-tabs .nav-tanks-hud.nav-open::before {
content: '';
display: block;
height: 2px;
margin: -14px -14px 12px;
background: linear-gradient(90deg, var(--accent), rgba(255, 201, 77, 0));
}
.tanks-hud-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tanks-hud-title { font-weight: 700; font-size: 13px; letter-spacing: 0.08em; color: var(--accent); }
.tanks-hud-rule { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); }
.tanks-hud-count { font-weight: 600; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.tanks-hud-search {
display: flex;
align-items: center;
gap: 9px;
padding: 10px 12px;
margin-bottom: 10px;
border-radius: var(--bevel-sm);
background: rgba(255, 255, 255, 0.05);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.tanks-hud-search-icon { display: flex; color: var(--text-faint); }
.tanks-hud-search-icon svg { width: 16px; height: 16px; }
.tanks-hud-search input {
flex: 1;
min-width: 0;
border: 0;
background: none;
outline: none;
font: 500 16px inherit;
color: var(--text);
}
.tanks-hud-search input::-webkit-search-cancel-button { filter: invert(0.7); }
.tanks-hud-suggest { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.tanks-hud-suggest[hidden] { display: none; }
.tanks-hud-suggest-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 11px;
border-radius: var(--bevel-sm);
background: rgba(255, 255, 255, 0.04);
box-shadow: inset 0 0 0 1px var(--line-soft);
font-weight: 600;
font-size: 13.5px;
color: var(--text);
text-decoration: none;
}
.tanks-hud-suggest-item img { width: 46px; height: 26px; object-fit: contain; }
.tanks-hud-links { display: flex; flex-direction: column; gap: 6px; }
.tanks-hud-link {
position: relative;
display: flex;
align-items: center;
gap: 11px;
padding: 10px 26px 10px 11px;
border-radius: var(--bevel-sm);
background: rgba(255, 255, 255, 0.04);
box-shadow: inset 0 0 0 1px var(--line-soft);
text-decoration: none;
}
.tanks-hud-link-icon { display: flex; flex: none; color: var(--text-dim); }
.tanks-hud-link-icon svg { width: 20px; height: 20px; }
.tanks-hud-link-text { display: flex; flex-direction: column; gap: 1px; }
.tanks-hud-link-name { font-weight: 700; font-size: 14px; color: var(--text); }
.tanks-hud-link-note { font-size: 10.5px; color: var(--text-faint); }
/* Шеврон рисуем углом рамки — панель собирается в JS, тащить туда иконку
ради трёх строк незачем. */
.tanks-hud-link::after {
content: '';
position: absolute;
right: 13px;
top: 50%;
width: 7px;
height: 7px;
border-right: 2px solid var(--text-faint);
border-bottom: 2px solid var(--text-faint);
transform: translateY(-50%) rotate(-45deg);
}
.tanks-hud-link:active { background: rgba(255, 255, 255, 0.09); }
.tanks-hud-link.active {
background: linear-gradient(90deg, rgba(255, 201, 77, 0.16), rgba(255, 201, 77, 0.04));
box-shadow: inset 0 0 0 1px rgba(255, 201, 77, 0.3);
}
.tanks-hud-link.active .tanks-hud-link-icon { color: var(--accent); }
.tanks-hud-link.active .tanks-hud-link-name { color: var(--accent); }
.tanks-hud-link.active .tanks-hud-link-note { color: var(--text-dim, #a9b6ac); }
.tanks-hud-link.active::after { border-color: var(--accent); }
.tanks-hud-recent { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.tanks-hud-recent[hidden] { display: none; }
.tanks-hud-recent-title {
margin-bottom: 8px;
font-weight: 700;
font-size: 9.5px;
letter-spacing: 0.12em;
color: var(--text-faint);
}
.tanks-hud-recent-row { display: flex; gap: 8px; }
.tanks-hud-recent-item {
/* Ровно треть ширины, даже когда смотрели всего одну машину: растянутая
на весь ряд карточка читается как баннер, а не как история. */
flex: 0 0 calc((100% - 16px) / 3);
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 6px;
border-radius: var(--bevel-sm);
background: rgba(255, 255, 255, 0.04);
box-shadow: inset 0 0 0 1px var(--line-soft);
font-weight: 600;
font-size: 10.5px;
color: var(--text);
text-decoration: none;
text-align: center;
}
.tanks-hud-recent-item img { width: 56px; height: 32px; object-fit: contain; }
.tanks-hud-recent-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tanks-hud-recent-blank { display: block; width: 56px; height: 32px; }
/* Лист «Ещё» — тот же HUD, что и «Техника», только кромка светлая: разделы
разложены по группам, «контент» плитками, «сообщество» строками. */
body.has-bottom-tabs .nav-more-panel.nav-more-hud.nav-open {
left: 8px;
right: 8px;
bottom: calc(var(--bottom-tabs-h, 72px) + 4px);
padding: 14px;
border: 1px solid var(--line);
border-radius: 0;
clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: linear-gradient(180deg, rgba(32, 41, 36, 0.99), rgba(9, 13, 11, 0.99));
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
}
/* Ручка-полоска и собственное затемнение листу-HUD не нужны: у него срезанные
углы (clip-path режет и псевдоэлементы), а фон гасит общий слой .nav-sheet-scrim. */
body.has-bottom-tabs .nav-more-panel.nav-more-hud.nav-open::after { content: none; }
body.has-bottom-tabs .nav-more-panel.nav-more-hud.nav-open::before {
content: '';
position: static;
display: block;
width: auto;
height: 2px;
margin: -14px -14px 12px;
border-radius: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
}
.more-hud-group-title {
margin-bottom: 8px;
font-weight: 700;
font-size: 9.5px;
letter-spacing: 0.12em;
color: var(--text-faint);
}
.more-hud-rows + .more-hud-group-title,
.more-hud-tiles + .more-hud-group-title { margin-top: 12px; }
.more-hud-tiles { display: flex; gap: 8px; }
.more-hud-rows { display: flex; flex-direction: column; gap: 6px; }
.more-hud-item {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 11px;
border-radius: var(--bevel-sm);
background: rgba(255, 255, 255, 0.04);
box-shadow: inset 0 0 0 1px var(--line-soft);
font-weight: 600;
font-size: 13.5px;
color: var(--text);
text-decoration: none;
}
.more-hud-item[hidden] { display: none; }
.more-hud-item:active { background: rgba(255, 255, 255, 0.09); }
.more-hud-item.active {
background: rgba(255, 201, 77, 0.12);
box-shadow: inset 0 0 0 1px rgba(255, 201, 77, 0.28);
color: var(--accent);
}
.more-hud-icon { display: flex; color: var(--text-dim); }
.more-hud-item.active .more-hud-icon { color: var(--accent); }
.more-hud-icon svg { width: 17px; height: 17px; }
/* Плитка — иконка над подписью: у «контента» две-три цели, и в ряд они
читаются быстрее, чем такие же строки, как у сообщества. */
.more-hud-tiles .more-hud-item {
flex: 1;
min-width: 0;
flex-direction: column;
align-items: flex-start;
gap: 7px;
padding: 11px;
font-size: 13px;
}
.more-hud-tiles .more-hud-icon svg { width: 18px; height: 18px; }
/* Точка «турнир идёт» в строке стоит у подписи, а не в углу карточки: в углу
она читалась как значок самой плитки, а не как состояние раздела. */
.more-hud-item .nav-live-dot { position: static; margin-left: 7px; flex: none; }
.more-hud-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* Клик по затемнению должен доходить до страницы: его ловит общий
обработчик «клик мимо панели закрывает её». */
.nav-sheet-scrim.nav-open {
position: fixed;
inset: 0;
z-index: 48;
display: block;
pointer-events: none;
background: radial-gradient(120% 60% at 50% 100%, rgba(255, 201, 77, 0.1), transparent 60%), rgba(0, 0, 0, 0.62);
animation: navScrimIn 0.18s ease-out;
}
@keyframes navSheetIn {
from { transform: translateY(14px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes navScrimIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Кнопка обратной связи не должна лежать на баре */
body.has-bottom-tabs .feedback-fab { bottom: calc(var(--bottom-tabs-h, 72px) + 12px); }
/* Место под таб-бар, чтобы он не закрывал подвал и кнопку «Показать ещё» */
body.has-bottom-tabs { padding-bottom: calc(var(--bottom-tabs-h, 72px) + 8px); }
/* «Войти» в шапке дублирует кружок «Профиль» в таб-баре снизу — на этой
ширине он уже есть, второй кнопкой сверху захламляем шапку. */
body.has-bottom-tabs .player-account-login { display: none; }
}
/* ============================================================================
Актуальные события игры: виджет сайдбара на главной и страница /events.
Разметка общая (public/gameEvents.js), различие — модификатор -compact.
============================================================================ */
.game-events-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.game-event {
display: flex;
gap: 6px;
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--line-soft);
background: var(--surface-2);
color: var(--text);
text-decoration: none;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.game-event:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.game-event-body {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
flex: 1;
}
/* Превью с tanksblitz.ru: фиксированная ширина, чтобы карточки в списке были
одной высоты независимо от пропорций присланной картинки. */
.game-event-has-media { gap: 14px; align-items: center; }
.game-event-media {
flex-shrink: 0;
width: 132px;
aspect-ratio: 16 / 9;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--surface-2);
}
.game-event-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.game-event-title {
font-weight: 700;
font-size: 15.5px;
line-height: 1.3;
}
/* Официальный анонс события — одна строка от разработчика, не наш пересказ */
.game-event-summary {
font-size: 13.6px;
line-height: 1.4;
color: var(--muted);
}
/* «Новое» — событие, которое появилось на вики за последние трое суток.
Стоит перед названием: в сайдбаре длинный заголовок обрезается по второй
строке, и метка в хвосте просто не дожила бы до показа. */
.game-event-new {
flex-shrink: 0;
margin-right: 7px;
vertical-align: 1px;
display: inline-block;
padding: 1px 7px;
border-radius: 999px;
background: var(--accent2, var(--accent));
color: #0d130f;
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.game-event-meta {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
font-size: 13px;
color: var(--muted);
}
.game-event-deadline {
font-weight: 700;
color: var(--accent);
}
/* Осталось три дня или меньше — подсвечиваем: это единственная причина
смотреть на срок вообще. */
.game-event-deadline.is-urgent { color: #ff6f5e; }
.game-event-period { color: var(--muted); }
.game-event-compact { padding: 9px 10px; }
.game-event-compact .game-event-body { gap: 3px; }
.game-event-compact .game-event-summary {
font-size: 12.4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.game-event-compact .game-event-title { font-size: 14.2px; }
/* В сайдбаре длинные названия («Трансляции Плей-Ин и Группового этапа…»)
занимали бы полкарточки — режем до двух строк, полное видно на /events. */
.game-event-compact .game-event-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.game-event-compact .game-event-meta { font-size: 12.2px; }
.events-layout {
display: block;
max-width: 860px;
}
.events-main .game-events-list { gap: 10px; }
.events-source {
margin: 18px 0 0;
font-size: 13px;
color: var(--muted);
}
.events-source a { color: var(--accent); }
@media (max-width: 560px) {
/* Картинка рядом с текстом на узком экране оставляет заголовку два слова —
уводим её наверх во всю ширину карточки. */
.game-event-has-media {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.game-event-media { width: 100%; }
}
/* ---- Страница розыгрыша (/giveaway/:id) ----------------------------------
Свёрстано по макету «Розыгрыш» из Claude Design: герой с картинкой-подложкой
и панелью действия справа, ниже — как это работает, приз и живой список
участников. Брейкпоинт 760px: одна колонка, компактный отсчёт и липкая
кнопка «Участвую» внизу экрана. Настройки подложки (прозрачность,
затемнение, размытие краёв, точка фокуса) приходят из админки
inline-переменными на .gp-hero. */
.gp-wrap { display: flex; flex-direction: column; gap: 26px; }
/* ---- Герой ---- */
.gp-hero {
--gp-image: none;
--gp-img-opacity: 0.55;
--gp-dim: 0.55;
--gp-blur: 22px;
--gp-focus: 50% 50%;
position: relative;
overflow: hidden;
isolation: isolate;
border-radius: 18px;
border: 1px solid rgba(255, 201, 77, 0.30);
background: linear-gradient(160deg, #17180f 0%, #0a0e0c 62%);
box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
animation: gpRise 0.5s ease both;
}
.gp-hero-finished { border-color: rgba(143, 209, 63, 0.30); }
/* Картинка одним резким слоем: никакой размытой копии-подложки (она двоила
изображение) — ползунок «размытие краёв» растворяет края самого кадра
маской по периметру. */
.gp-hero-layer {
position: absolute;
inset: 0;
background-image: var(--gp-image);
background-size: cover;
background-position: var(--gp-focus);
background-repeat: no-repeat;
pointer-events: none;
}
/* Размытый слой остался только у сайдбарного баннера (.gb-strip): там он —
вся подложка. Страница розыгрыша его больше не рисует. */
.gp-hero-blur {
inset: -6%;
filter: blur(var(--gp-blur)) saturate(1.15);
opacity: calc(var(--gp-img-opacity) * 0.8);
}
.gp-hero-sharp {
opacity: var(--gp-img-opacity);
-webkit-mask-image:
linear-gradient(90deg, transparent 0, #000 calc(var(--gp-blur) * 3), #000 calc(100% - var(--gp-blur) * 3), transparent 100%),
linear-gradient(180deg, transparent 0, #000 calc(var(--gp-blur) * 3), #000 calc(100% - var(--gp-blur) * 3), transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(90deg, transparent 0, #000 calc(var(--gp-blur) * 3), #000 calc(100% - var(--gp-blur) * 3), transparent 100%),
linear-gradient(180deg, transparent 0, #000 calc(var(--gp-blur) * 3), #000 calc(100% - var(--gp-blur) * 3), transparent 100%);
mask-composite: intersect;
}
/* Затемнение — своим слоем: не зависит от прозрачности картинки, иначе на
светлых фото текст пропадал бы. */
.gp-hero-veil {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 92% 80% at 30% 40%, transparent 0%, rgba(4, 7, 6, calc(var(--gp-dim) * 0.9)) 74%),
linear-gradient(90deg, rgba(4, 7, 6, calc(var(--gp-dim) + 0.35)) 0%, rgba(4, 7, 6, calc(var(--gp-dim) + 0.15)) 44%, rgba(4, 7, 6, calc(var(--gp-dim) * 0.5)) 100%);
}
.gp-hero-scan {
position: absolute;
inset: 0;
opacity: 0.16;
pointer-events: none;
background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 3px);
}
.gp-hero-body {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
gap: 40px;
align-items: end;
padding: 40px 44px 38px;
}
.gp-hero-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.gp-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gp-status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 201, 77, 0.34);
background: rgba(255, 201, 77, 0.10);
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #ffd166;
}
.gp-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
animation: gpPulse 1.8s ease-in-out infinite;
}
.gp-status-finished {
border-color: rgba(143, 209, 63, 0.38);
background: rgba(143, 209, 63, 0.10);
color: #8fd13f;
}
.gp-hero-meta { font-size: 12px; font-weight: 600; color: #7f8b83; }
.gp-title {
margin: 0;
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: clamp(30px, 4.4vw, 54px);
line-height: 1.04;
text-transform: uppercase;
letter-spacing: 0.005em;
text-wrap: balance;
text-shadow: 0 4px 28px rgba(0, 0, 0, 0.7);
}
/* Приз — строкой под заголовком, золотым градиентом */
.gp-title-prize {
display: block;
margin-top: -8px;
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: clamp(22px, 2.6vw, 34px);
line-height: 1.1;
text-transform: uppercase;
background: linear-gradient(120deg, #ffd166 0%, #f2a93b 60%, #ffe6a6 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.gp-lead {
margin: 0;
max-width: 560px;
font-size: 15.5px;
line-height: 1.6;
color: #cfd8d1;
text-wrap: pretty;
}
.gp-finished-note {
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
align-self: flex-start;
padding: 14px 20px;
border-radius: 12px;
border: 1px solid rgba(143, 209, 63, 0.34);
background: rgba(143, 209, 63, 0.08);
backdrop-filter: blur(6px);
}
.gp-finished-title {
font-family: 'Oswald', sans-serif;
font-size: 22px;
line-height: 1;
text-transform: uppercase;
color: #b9e77a;
}
.gp-finished-sub { font-size: 12.5px; font-weight: 600; color: #a9b6ac; }
/* ---- Отсчёт ---- */
.gp-countdown { display: grid; grid-template-columns: repeat(4, 104px); gap: 8px; }
.gp-cd {
display: flex;
align-items: baseline;
justify-content: center;
gap: 5px;
padding: 12px 18px 11px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(10, 14, 12, 0.62);
backdrop-filter: blur(6px);
}
.gp-cd-num {
/* Ширина под две цифры: без неё «11» и «08» дают разную ширину ячейки,
и каждую секунду табло дёргалось бы. */
min-width: 2ch;
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 34px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
color: #fff;
}
.gp-cd-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7f8b83;
}
/* Секунды — единственная всё время бегущая цифра, поэтому золотом */
.gp-cd-sec { border-color: rgba(255, 201, 77, 0.34); background: rgba(255, 201, 77, 0.10); }
.gp-cd-sec .gp-cd-num { color: #ffd166; animation: gpTick 0.35s ease; }
.gp-cd-sec .gp-cd-label { color: rgba(255, 209, 102, 0.7); }
.gp-progress-box { max-width: 560px; display: flex; flex-direction: column; gap: 7px; }
.gp-progress {
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.gp-progress-bar {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #f2a93b, #ffd166 70%, #fff2cc);
box-shadow: 0 0 16px rgba(255, 201, 77, 0.55);
transition: width 0.9s linear;
}
.gp-progress-legend {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 11.5px;
font-weight: 600;
color: #7f8b83;
}
/* ---- Панель действия ---- */
.gp-panel {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
padding: 22px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: linear-gradient(180deg, rgba(26, 33, 29, 0.92), rgba(10, 14, 12, 0.94));
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
}
.gp-panel-stats { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gp-stat { display: flex; flex-direction: column; gap: 2px; }
.gp-stat-right { text-align: right; }
.gp-stat-num {
font-family: 'Oswald', sans-serif;
font-size: 30px;
line-height: 1;
color: #fff;
font-variant-numeric: tabular-nums;
}
.gp-stat-right .gp-stat-num { color: #ffd166; }
.gp-stat-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #7f8b83;
}
.gp-faces-row { display: flex; align-items: center; gap: 10px; }
.gp-faces { display: flex; }
.gp-face {
width: 30px;
height: 30px;
margin-left: -8px;
border-radius: 50%;
border: 2px solid #101511;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 800;
color: #1a1200;
background: linear-gradient(140deg, #ffd166, #c98a2a);
}
.gp-faces-text { font-size: 12px; font-weight: 500; color: #a9b6ac; }
.gp-btn {
position: relative;
overflow: hidden;
display: block;
width: 100%;
padding: 17px 20px;
border: 0;
border-radius: 12px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
font-size: 19px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
text-decoration: none;
color: #241a00;
background: linear-gradient(135deg, #ffd166 0%, #f2a93b 100%);
box-shadow: 0 14px 34px rgba(242, 169, 59, 0.34);
transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.gp-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(242, 169, 59, 0.5); }
.gp-btn:active { transform: translateY(0); }
.gp-btn:disabled { opacity: 0.7; cursor: default; transform: none; }
/* Блик, пробегающий по кнопке */
.gp-btn-shine {
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
animation: gpSheen 2.6s ease-in-out infinite;
}
.gp-btn-ghost {
padding: 15px 18px;
font-size: 17px;
letter-spacing: 0.05em;
color: #ffd166;
background: rgba(255, 201, 77, 0.10);
border: 1px solid rgba(255, 201, 77, 0.42);
box-shadow: none;
}
.gp-btn-ghost:hover { background: rgba(255, 201, 77, 0.18); transform: none; box-shadow: none; }
.gp-guest { display: flex; flex-direction: column; gap: 10px; }
.gp-joined {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 16px;
border-radius: 12px;
border: 1px solid rgba(143, 209, 63, 0.4);
background: rgba(143, 209, 63, 0.10);
animation: gpJoinedIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gp-joined-mark {
flex: none;
width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 16px;
font-weight: 800;
color: #0a0d0b;
background: #8fd13f;
}
.gp-joined-title {
display: block;
font-family: 'Oswald', sans-serif;
font-size: 16px;
text-transform: uppercase;
color: #b9e77a;
}
.gp-joined-sub { font-size: 12px; color: #a9b6ac; }
.gp-share {
align-self: flex-start;
padding: 8px 14px;
font-size: 12.5px;
font-weight: 700;
font-family: inherit;
color: #a9b6ac;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 999px;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.gp-share:hover { color: #ffd166; border-color: rgba(255, 201, 77, 0.5); }
/* ---- Победители ---- */
.gp-winners {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.gp-winner {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 12px;
padding: 22px 20px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(10, 14, 12, 0.9));
}
.gp-winner-1 { border-color: rgba(255, 201, 77, 0.42); background: linear-gradient(160deg, rgba(255, 201, 77, 0.16), rgba(10, 14, 12, 0.9)); }
.gp-winner-3 { border-color: rgba(201, 138, 42, 0.34); background: linear-gradient(160deg, rgba(201, 138, 42, 0.12), rgba(10, 14, 12, 0.9)); }
.gp-winner-me { box-shadow: 0 0 0 1px rgba(255, 201, 77, 0.5), 0 14px 34px rgba(0, 0, 0, 0.4); }
.gp-winner-place {
font-family: 'Oswald', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #cfd8d1;
}
.gp-winner-1 .gp-winner-place { color: #ffd166; }
.gp-winner-3 .gp-winner-place { color: #c98a2a; }
.gp-winner-name {
font-family: 'Oswald', sans-serif;
font-size: 26px;
line-height: 1;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
}
.gp-winner-note { font-size: 12.5px; color: #a9b6ac; }
.gp-winner a { color: inherit; text-decoration: none; }
.gp-winner a:hover { color: #ffd166; }
/* ---- Низ страницы ---- */
.gp-body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 372px);
gap: 18px;
align-items: start;
}
.gp-card {
display: flex;
flex-direction: column;
gap: 22px;
padding: 28px 30px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.07);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}
.gp-h2 {
margin: 0;
font-family: 'Oswald', sans-serif;
font-size: 22px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text);
}
.gp-steps { display: grid; gap: 16px; }
.gp-step {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 14px;
align-items: start;
}
.gp-step-num {
width: 34px;
height: 34px;
border-radius: 9px;
display: grid;
place-items: center;
font-family: 'Oswald', sans-serif;
font-size: 16px;
color: #ffd166;
background: rgba(255, 201, 77, 0.12);
border: 1px solid rgba(255, 201, 77, 0.26);
}
.gp-step-title { display: block; margin-bottom: 3px; font-size: 14.5px; font-weight: 700; }
.gp-step-text { font-size: 13.5px; line-height: 1.55; color: #a9b6ac; }
.gp-note-box {
padding: 14px 16px;
border-radius: 12px;
background: rgba(255, 201, 77, 0.07);
border: 1px solid rgba(255, 201, 77, 0.18);
font-size: 13px;
line-height: 1.55;
color: #e3dcc6;
}
.gp-aside { display: flex; flex-direction: column; gap: 18px; }
.gp-prize-card {
position: relative;
overflow: hidden;
padding: 22px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(160deg, #17180f 0%, #0a0e0c 70%);
}
.gp-prize-card::before {
content: "";
position: absolute;
inset: -40% -10% auto;
height: 220px;
background: radial-gradient(ellipse at 50% 40%, rgba(255, 201, 77, 0.22), transparent 70%);
}
.gp-prize-inner { position: relative; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.gp-prize-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7f8b83;
}
.gp-prize-art {
width: 100%;
max-width: 260px;
align-self: center;
border-radius: 10px;
animation: gpFloat 7s ease-in-out infinite;
filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.6));
}
.gp-prize-value {
font-family: 'Oswald', sans-serif;
font-size: 22px;
line-height: 1.15;
text-transform: uppercase;
color: #fff;
}
.gp-prize-note { font-size: 13px; line-height: 1.5; color: #a9b6ac; }
/* Допы за 2-е место и далее — списком под главным призом, мельче и без
картинки: внимание должно оставаться на главном призе. */
.gp-prize-extra {
display: flex;
flex-direction: column;
gap: 6px;
margin: 4px 0 0;
padding: 12px 0 0;
border-top: 1px solid var(--line-soft);
list-style: none;
font-size: 13px;
color: #cdd6cf;
}
.gp-prize-extra-place {
margin-right: 6px;
font-weight: 700;
color: #7f8b83;
}
.gp-list-card { gap: 14px; padding: 20px; }
.gp-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gp-h3 {
margin: 0;
font-family: 'Oswald', sans-serif;
font-size: 17px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.gp-count {
padding: 4px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
color: #ffd166;
background: rgba(255, 201, 77, 0.12);
}
.gp-list {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 320px;
overflow-y: auto;
margin: 0 -6px;
padding: 0 6px;
list-style: none;
}
.gp-row {
display: grid;
grid-template-columns: 26px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 9px 8px;
border-radius: 9px;
}
.gp-row:hover { background: rgba(255, 255, 255, 0.05); }
.gp-row-me { background: rgba(255, 201, 77, 0.10); }
.gp-row-n { font-family: 'Oswald', sans-serif; font-size: 12px; color: #7f8b83; text-align: right; }
.gp-row-player { display: flex; align-items: center; gap: 7px; min-width: 0; }
.gp-row-name { font-size: 13.5px; font-weight: 600; color: #eef3ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-row-name a { color: inherit; text-decoration: none; }
.gp-row-name a:hover { color: #ffd166; }
.gp-row-clan { font-size: 11px; font-weight: 700; color: #49d8c2; }
.gp-row-time { font-size: 11.5px; color: #7f8b83; white-space: nowrap; }
.gp-list-foot { font-size: 11.5px; color: #7f8b83; }
.gp-empty { margin: 0; font-size: 14px; color: #7f8b83; }
/* ---- Липкая кнопка на телефоне ---- */
.gp-sticky {
position: fixed;
inset: auto 0 0;
z-index: 20;
display: none;
align-items: center;
gap: 12px;
padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
background: linear-gradient(180deg, rgba(10, 13, 11, 0.72), rgba(10, 13, 11, 0.97));
border-top: 1px solid rgba(255, 201, 77, 0.24);
backdrop-filter: blur(12px);
}
.gp-sticky-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gp-sticky-time {
min-width: 108px;
font-family: 'Oswald', sans-serif;
font-size: 17px;
line-height: 1;
color: #fff;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.gp-sticky-sub { font-size: 11px; font-weight: 600; color: #7f8b83; white-space: nowrap; }
.gp-sticky .gp-btn { flex: 1; min-height: 50px; padding: 14px 16px; font-size: 17px; box-shadow: 0 10px 26px rgba(242, 169, 59, 0.34); }
@keyframes gpSheen {
0% { transform: translateX(-130%) skewX(-18deg); }
100% { transform: translateX(320%) skewX(-18deg); }
}
@keyframes gpPulse {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.12); }
}
@keyframes gpFloat {
0%, 100% { transform: translateY(0) rotate(-1.5deg); }
50% { transform: translateY(-14px) rotate(1deg); }
}
@keyframes gpRise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
@keyframes gpTick {
from { opacity: 0.35; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
@keyframes gpJoinedIn {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: none; }
}
/* ---- Телефон: одна колонка, компактный отсчёт, липкий CTA ---- */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 520px) {
.gp-wrap { gap: 16px; }
.gp-has-sticky { padding-bottom: 84px; }
.gp-hero-body { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 18px 24px; }
.gp-countdown { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gp-cd { padding: 10px 8px 9px; }
.gp-cd-num { font-size: 25px; }
.gp-cd-label { font-size: 10px; letter-spacing: 0.1em; }
.gp-body { grid-template-columns: minmax(0, 1fr); }
.gp-card { padding: 20px 18px; }
.gp-winners { grid-template-columns: minmax(0, 1fr); }
.gp-sticky { display: flex; }
/* Липкая кнопка внизу дублирует действие — в панели оно ни к чему */
.gp-has-sticky .gp-panel-action { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.gp-btn-shine, .gp-status-dot, .gp-prize-art, .gp-hero, .gp-cd-sec .gp-cd-num, .gp-joined { animation: none; }
.gp-btn:hover { transform: none; }
}
.gp-layout { grid-template-columns: minmax(0, 1fr); }
/* ---- Полоска идущего розыгрыша в сайдбаре -------------------------------
Самый верх правой колонки, над баннером обновления: статус, приз и время до
конца одной строкой. Оформление наследует страницу розыгрыша — та же
картинка-подложка (слои .gp-hero-*) и золотая пилюля статуса. */
.gb-strip {
--gp-image: none;
--gp-img-opacity: 0.55;
--gp-dim: 0.55;
--gp-blur: 22px;
--gp-focus: 50% 50%;
position: relative;
display: block;
overflow: hidden;
isolation: isolate;
margin-bottom: 14px;
border-radius: 12px;
/* Без янтарной обводки — как и у остальных карточек сайдбара: колонка из
обведённых «окон» подряд рисовала лишние контуры на весь экран. */
border: none;
background: linear-gradient(160deg, #17180f 0%, #0a0e0c 70%);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
color: inherit;
text-decoration: none;
transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.gb-strip:hover {
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}
.gb-strip .gp-hero-blur { opacity: calc(var(--gp-img-opacity) * 0.55); }
.gb-strip-body {
position: relative;
display: flex;
flex-direction: column;
gap: 7px;
padding: 12px 14px;
}
.gb-strip-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gb-strip-kicker {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #ffd166;
}
.gb-strip-go { font-size: 15px; font-weight: 800; color: #ffd166; }
.gb-strip-title {
font-family: 'Oswald', sans-serif;
font-size: 17px;
font-weight: 700;
line-height: 1.15;
text-transform: uppercase;
background: linear-gradient(120deg, #ffd166 0%, #f2a93b 60%, #ffe6a6 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Время одной строкой: моноширинные цифры, чтобы полоска не дёргалась */
.gb-strip-time {
font-family: 'Oswald', sans-serif;
font-size: 20px;
line-height: 1;
letter-spacing: 0.02em;
color: #fff;
font-variant-numeric: tabular-nums;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
/* Завершённый розыгрыш: тот же корпус полоски, но вместо табло — короткая
строка с победителями (без моноширинных цифр — это уже не отсчёт). */
.gb-strip-finished .gb-strip-kicker { color: #63dd8d; }
.gb-strip-finished .gb-strip-go { color: #63dd8d; }
.gb-strip-winners {
font-size: 13.5px;
line-height: 1.3;
color: #dfe5df;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
@media (prefers-reduced-motion: reduce) {
.gb-strip:hover { transform: none; }
}
/* ---- Вкладка «Техника» в верхнем баре ------------------------------------
Три вкладки про танки (сравнение, топ, рейтинг) плюс конструктор свёрнуты в
одну кнопку с выпадающим меню: карточки разделов и строка поиска машины.
Разметку собирает initTanksDropdown() в script.js. */
.nav-tanks-tab { position: relative; display: inline-flex; }
.nav-tanks-btn {
display: inline-flex;
align-items: center;
gap: 6px;
/* Кнопке нужен явный сброс: .page-tab писался под ссылки и фон не задаёт,
поэтому <button> оставался с системным светлым фоном. */
background: transparent;
border: 0;
color: var(--muted);
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.nav-tanks-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav-tanks-btn.active { color: var(--accent); background: rgba(255, 201, 77, 0.1); }
.nav-tanks-btn.is-open { color: var(--text); background: rgba(255, 255, 255, 0.07); }
.nav-tanks-caret { font-size: 17px; line-height: 1; margin-left: 5px; opacity: 1; transition: transform 0.15s ease; }
.nav-tanks-btn.is-open .nav-tanks-caret { transform: rotate(180deg); }
/* Меню вынесено в body и позиционируется от кнопки (см. initTanksDropdown):
строка вкладок прокручивается и обрезала бы выпадающий список. */
.nav-tanks-menu {
position: fixed;
z-index: 120;
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
border-radius: 14px;
border: 1px solid rgba(255, 201, 77, 0.28);
background: linear-gradient(160deg, #15180f 0%, #0b0f0d 70%);
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
}
.nav-tanks-menu[hidden] { display: none; }
/* Анимацию вешаем на открытое состояние: на скрытом элементе она успевала
отыграть вхолостую, и меню всплывало прозрачным. */
.nav-tanks-menu.is-open { animation: navTanksIn 0.16s ease both; }
@keyframes navTanksIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
/* Поиск и подсказки переиспользуют классы ангарного HUD с телефона, но в
выпадающем меню им нужны свои размеры. */
.nav-tanks-menu .tanks-hud-search {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 12px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.04);
}
.nav-tanks-menu .tanks-hud-search-icon { display: flex; color: var(--text-faint); }
.nav-tanks-menu .tanks-hud-search-icon svg { width: 15px; height: 15px; }
.nav-tanks-menu .tanks-hud-search input {
flex: 1;
min-width: 0;
border: 0;
outline: none;
background: none;
color: var(--text);
font: inherit;
font-size: 14px;
}
.nav-tanks-menu .tanks-hud-suggest {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 220px;
overflow-y: auto;
}
.nav-tanks-menu .tanks-hud-suggest-item {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
border-radius: 8px;
color: var(--text);
text-decoration: none;
font-size: 13.5px;
}
.nav-tanks-menu .tanks-hud-suggest-item:hover { background: rgba(255, 201, 77, 0.10); }
.nav-tanks-menu .tanks-hud-suggest-item img { width: 46px; height: 28px; object-fit: contain; }
.nav-tanks-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nav-tanks-card {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 10px;
align-items: center;
padding: 11px 12px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
text-decoration: none;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.nav-tanks-card:hover {
border-color: rgba(255, 201, 77, 0.45);
background: rgba(255, 201, 77, 0.08);
transform: translateY(-1px);
}
.nav-tanks-card.active { border-color: rgba(255, 201, 77, 0.55); background: rgba(255, 201, 77, 0.10); }
.nav-tanks-card-icon {
grid-row: span 2;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 8px;
color: #ffd166;
background: rgba(255, 201, 77, 0.12);
}
.nav-tanks-card-icon svg { width: 17px; height: 17px; }
.nav-tanks-card-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.nav-tanks-card-note { font-size: 11.5px; color: var(--text-faint); line-height: 1.35; }
.nav-tanks-all {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 12px;
border-radius: 10px;
font-size: 12.5px;
font-weight: 700;
color: #ffd166;
text-decoration: none;
background: rgba(255, 201, 77, 0.08);
}
.nav-tanks-all:hover { background: rgba(255, 201, 77, 0.16); }
.nav-tanks-all .tanks-hud-count { font-weight: 600; color: var(--text-faint); }
/* Меню «Сообщество» — тот же ящик, что у «Техники», но карточек три и они
идут столбиком: в две колонки третья висела бы половиной строки. */
.nav-community-menu .nav-tanks-cards { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) {
/* На телефоне разделы живут в нижнем баре — выпадающее меню там лишнее. */
.nav-tanks-tab { display: none; }
}
/* ---- Справочник техники: вкладки наций и витрины --------------------------
Обзор — по пять машин верхнего уровня на нацию, клик по вкладке (или по
шапке витрины) открывает нацию целиком. */
/* Вкладки переносятся на второй ряд, когда не влезают по ширине: прокрутка
вбок прятала половину наций и на мышке была неудобной. */
.nation-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 4px 0 14px;
}
.nation-tab {
display: inline-flex;
align-items: center;
gap: 7px;
flex: none;
padding: 8px 13px;
border-radius: var(--radius-pill, 999px);
border: 1px solid var(--line, rgba(255, 255, 255, 0.10));
background: rgba(255, 255, 255, 0.03);
color: var(--muted);
font: inherit;
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
/* Только background-color: сокращённое background сбрасывало background-size
у вкладок-флагов (картинка приходит инлайном из vehicles.js), и на наведении
флаг разворачивался в натуральную величину. */
.nation-tab:hover { color: var(--text); background-color: rgba(255, 255, 255, 0.06); }
.nation-tab.active {
color: var(--accent);
border-color: rgba(255, 201, 77, 0.45);
background-color: rgba(255, 201, 77, 0.10);
font-weight: 700;
}
.nation-tab-count {
padding: 1px 7px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
color: var(--text-faint);
background: rgba(255, 255, 255, 0.07);
}
.nation-tab.active .nation-tab-count { color: var(--accent); background: rgba(255, 201, 77, 0.16); }
/* Шапка витрины — кнопка: по ней нация открывается целиком */
.nation-section-open {
width: 100%;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.nation-open-hint {
margin-left: auto;
font-size: 12px;
font-weight: 700;
color: var(--accent);
opacity: 0.85;
}
.nation-section-open:hover .nation-open-hint { opacity: 1; }
.nation-section-open:hover .nation-title { color: var(--accent); }
/* --- Опрос из Telegram: голосовать на сайте нельзя, показываем как текст --- */
.tg-poll { padding: 2px 0 4px; }
.tg-poll-kind {
font-size: 13px;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 2px;
}
.tg-poll-question { margin: 0 0 8px; }
.tg-poll-options {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.tg-poll-option {
padding: 8px 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
font-size: 15px;
}
/* ================= Страница «Розыгрыши» (/giveaways) =================
Два раздела одной сеткой: идущие сверху крупнее, история ниже плотнее.
Подложка карточки — та же картинка розыгрыша с теми же ручками прозрачности
и затемнения, что и на его странице, поэтому она задаётся переменными из
разметки (--gv-img и соседние), а не фиксированным фоном. */
/* Сетка как у остальных страниц: лента слева, узкая колонка справа под
рекламу. Раньше здесь стоял display: block — колонки не было вовсе, и месту
размещения sidebar на этой странице было некуда встать. */
.layout-giveaways .feed-col { min-width: 0; }
/* Активных объявлений нет — правой колонки тоже: иначе страница зря отдавала
бы 300 px пустоте (до этой правки .layout-giveaways была display: block и
занимала всю ширину). */
/* Смотрим на любого ребёнка .sidebar-ads, а не на .ad-card: объявление сети
вставляется как .ad-code (блок РСЯ), и по одному только .ad-card колонка
пряталась бы при живой рекламе. */
.layout-giveaways:not(:has(.sidebar-ads > *)) { grid-template-columns: minmax(0, 1fr); }
.layout-giveaways:not(:has(.sidebar-ads > *)) .sidebar-col { display: none; }
/* На телефоне колонки нет, и реклама встала бы перед первым розыгрышем
(.sidebar-col { order: -1 } выше) — уводим её под историю. */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 520px) {
.layout-giveaways .sidebar-col { order: 1; }
}
.gv-section { margin: 0 0 40px; }
.gv-section-title {
margin: 0 0 14px;
font-size: 20px;
letter-spacing: 0.02em;
}
.gv-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.gv-grid-past { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.gv-card {
position: relative;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-sm, 10px);
background: var(--panel);
}
/* Картинка отдельным слоем, а не фоном карточки: только так её можно
притушить и затемнить, не трогая текст поверх. */
.gv-card.has-image::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--gv-img);
background-size: cover;
background-position: var(--gv-img-focus, 50% 50%);
opacity: var(--gv-img-opacity, 0.55);
}
.gv-card.has-image::after {
content: '';
position: absolute;
inset: 0;
/* Затемнение здесь плотнее, чем на странице розыгрыша, и не зависит от
ручки админа: там картинка играет во весь экран, а тут поверх неё на
трёхстах пикселях идут заголовок, приз и список победителей — при слабой
подложке они нечитаемы. Ручка --gv-img-dim только добавляет сверху. */
background:
linear-gradient(180deg, rgba(10, 14, 12, 0.55), rgba(10, 14, 12, 0.94)),
rgba(10, 14, 12, calc(var(--gv-img-dim, 0.55) * 0.5));
}
.gv-card-body {
position: relative;
z-index: 1;
padding: 16px 16px 14px;
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
.gv-badge {
align-self: flex-start;
padding: 3px 9px;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
background: rgba(255, 255, 255, 0.04);
}
.gv-badge-live {
color: var(--accent-ink);
background: var(--accent);
border-color: transparent;
}
.gv-card-title {
margin: 0;
font-size: 17px;
line-height: 1.35;
}
.gv-card-title a { color: inherit; text-decoration: none; }
.gv-card-title a:hover { color: var(--accent); }
.gv-card-prize {
margin: 0;
font-size: 14px;
color: var(--text);
}
.gv-card-prize > span {
display: block;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
}
.gv-prize-extra { color: var(--text-dim); }
.gv-cd { display: flex; gap: 6px; }
.gv-cd-cell {
display: flex;
flex-direction: column;
align-items: center;
min-width: 46px;
padding: 6px 4px;
border: 1px solid var(--border);
border-radius: var(--radius-sm, 8px);
background: rgba(0, 0, 0, 0.35);
}
.gv-cd-cell b { font-size: 18px; font-variant-numeric: tabular-nums; }
.gv-cd-cell i { font-style: normal; font-size: 10px; color: var(--text-faint); }
.gv-winners { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.gv-winner {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.gv-winner-place {
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 11px;
color: var(--accent-ink);
background: var(--accent);
}
.gv-winner.is-me .gv-winner-name { color: var(--accent); }
.gv-winners-none { margin: 0; font-size: 13px; color: var(--text-faint); }
.gv-card-foot {
margin-top: auto;
padding-top: 4px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.gv-count { font-size: 13px; color: var(--text-dim); }
.gv-btn {
padding: 8px 16px;
border-radius: var(--radius-sm, 8px);
font-size: 14px;
font-weight: 600;
text-decoration: none;
color: var(--accent-ink);
background: var(--accent);
}
.gv-btn:hover { background: var(--amber-2); }
.gv-link { font-size: 13px; color: var(--text-dim); text-decoration: none; }
.gv-link:hover { color: var(--accent); }
.gv-totals {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin: 0 0 14px;
font-size: 13px;
color: var(--text-dim);
}
.gv-totals b { color: var(--text); font-size: 15px; }
.gv-empty {
margin: 0;
padding: 18px;
border: 1px dashed var(--border);
border-radius: var(--radius-sm, 10px);
color: var(--text-dim);
font-size: 14px;
}
.gv-more { margin: 16px auto 0; display: block; }
@media (max-width: 560px) {
.gv-grid, .gv-grid-past { grid-template-columns: 1fr; }
}
/* Ссылка на страницу «Розыгрыши» под карточками сайдбарного виджета. */
.giveaway-widget-all {
display: block;
margin-top: 8px;
text-align: right;
font-size: 13px;
color: var(--text-dim);
text-decoration: none;
}
.giveaway-widget-all:hover { color: var(--accent); }
/* ===== Мероприятия игроков (docs/EVENTS_SPEC.md) =========================
Три страницы на одном наборе классов: витрина /e, страница /e/<код> и
кабинет /my/events. Отдельной палитры не заводим — только переменные темы. */
.ev-page { max-width: 860px; }
.ev-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 18px; }
.ev-crumb { color: var(--text-faint); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.ev-title { margin: 6px 0 8px; font-size: clamp(22px, 3vw, 30px); line-height: 1.2; }
.ev-dates { color: var(--text-dim); font-size: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.ev-left { color: var(--accent); font-weight: 700; }
.ev-desc { color: var(--text); line-height: 1.6; margin-bottom: 14px; }
.ev-prize { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.ev-conditions { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.ev-conditions h2, .ev-board-wrap h2, .ev-winners h2, .ev-form h2, .ev-mine-list h2 {
margin: 0 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim);
}
.ev-conditions p { margin: 0; line-height: 1.6; }
.ev-action { margin: 16px 0; }
.ev-btn {
display: inline-block; background: var(--accent); color: var(--accent-ink);
border: 0; border-radius: 10px; padding: 11px 20px; font-weight: 700; font-size: 15px;
cursor: pointer; text-decoration: none;
}
.ev-btn:hover { background: var(--amber-2); }
.ev-btn:disabled { opacity: .6; cursor: default; }
.ev-note { color: var(--text-dim); margin: 12px 0; }
.ev-note--ok { color: var(--green); font-weight: 600; }
.ev-err { color: #ff8b7a; margin: 8px 0; }
.ev-empty { color: var(--text-dim); padding: 18px 0; }
.ev-hint { color: var(--text-faint); font-size: 13px; margin: 4px 0 12px; }
/* Общая цель: один прогресс на всех участников */
.ev-pool { margin: 18px 0; }
.ev-pool-head { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-dim); margin-bottom: 6px; }
.ev-pool-bar { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.ev-pool-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.ev-winners { margin: 18px 0; }
.ev-winners-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ev-winners-list li { display: flex; gap: 10px; align-items: center; }
.ev-board-wrap { margin-top: 22px; }
.ev-count { color: var(--text-faint); font-weight: 400; }
.ev-board { width: 100%; border-collapse: collapse; font-size: 14px; }
.ev-board th { text-align: left; color: var(--text-faint); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ev-board td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); }
.ev-board .ev-num, .ev-board th.ev-num { text-align: right; font-variant-numeric: tabular-nums; }
.ev-board .ev-me { background: rgba(255, 201, 77, .08); }
.ev-place { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ev-clan { color: var(--text-faint); }
.ev-refresh { color: var(--text-faint); font-size: 13px; margin-top: 10px; }
.ev-foot { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: 13px; }
.ev-report { background: none; border: 0; color: var(--text-dim); text-decoration: underline; cursor: pointer; padding: 0; font-size: 13px; }
/* Витрина */
.ev-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ev-card {
display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
padding: 14px 16px; text-decoration: none; color: inherit;
}
.ev-card:hover { border-color: var(--border-strong); }
.ev-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.ev-card-state { font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
.ev-card-state--live { color: var(--green); }
.ev-card-state--done { color: var(--text-faint); }
.ev-card-owner { font-size: 13px; color: var(--text-dim); }
.ev-card-title { margin: 0 0 8px; font-size: 17px; }
.ev-card-cond { margin: 0 0 10px; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.ev-card-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-faint); }
/* Кабинет автора */
.ev-form { display: grid; gap: 12px; max-width: 720px; margin-top: 24px; }
.ev-field { display: grid; gap: 5px; font-size: 14px; }
.ev-field > span { color: var(--text-dim); }
.ev-field input, .ev-field textarea, .ev-field select {
background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
color: var(--text); padding: 9px 11px; font: inherit; width: 100%;
}
.ev-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.ev-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.ev-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-dim); }
.ev-check input { width: auto; }
.ev-points { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.ev-block { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; background: var(--surface); }
.ev-block > summary { cursor: pointer; color: var(--text-dim); font-weight: 600; }
.ev-block > *:not(summary) { margin-top: 12px; }
.ev-preview { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.ev-preview-text { margin: 0 0 6px; line-height: 1.6; }
.ev-preview-cost { margin: 0; font-size: 13px; color: var(--text-faint); }
.ev-preview-errors { margin: 10px 0 0; padding-left: 18px; color: #ff8b7a; font-size: 13px; }
.ev-mine-list { display: grid; gap: 14px; }
.ev-mine { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.ev-mine-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ev-mine-top h3 { margin: 0; font-size: 17px; }
.ev-mine-top a { color: inherit; text-decoration: none; }
.ev-mine-dates, .ev-mine-cond { color: var(--text-dim); font-size: 13px; margin: 6px 0; line-height: 1.5; }
.ev-mine-link { display: flex; gap: 8px; margin: 10px 0; }
.ev-mine-link input {
flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
color: var(--text-dim); padding: 8px 10px; font: inherit;
}
.ev-mine-link button, .ev-mine-hide, .ev-pending-row button {
background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
color: var(--text); padding: 8px 12px; font: inherit; cursor: pointer;
}
.ev-mine-link button:hover, .ev-mine-hide:hover, .ev-pending-row button:hover { border-color: var(--border-strong); }
.ev-mine-stats { font-size: 13px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ev-pending { margin-top: 10px; font-size: 13px; color: var(--text-dim); }
.ev-pending-row { display: inline-flex; gap: 6px; align-items: center; margin: 4px 8px 0 0; }
.ev-mine-hide { margin-top: 10px; font-size: 13px; }
@media (max-width: 640px) {
.ev-row { grid-template-columns: 1fr; }
}
/* Промо мероприятий на странице «Для стримеров»: кабинет живёт в /my/events,
но искать его начинают отсюда. */
.strm-promo { padding-top: 0; padding-bottom: 0; }
.ev-promo {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px 18px;
margin-bottom: 18px;
max-width: 720px;
}
.ev-promo h2 { margin: 0 0 8px; font-size: 17px; }
.ev-promo p { margin: 0 0 14px; color: var(--text-dim); line-height: 1.6; }
.ev-promo-link { margin-left: 14px; color: var(--text-dim); font-size: 14px; }
/* ===== Страница мероприятия: поверх дизайн-системы розыгрыша (gp-*) =====
Своего здесь только то, чего у розыгрыша нет: таблица лидеров, лента боёв,
блок табло для OBS и обложка в кабинете. */
.evp-owner-bar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 10px 14px; border-radius: 10px;
background: rgba(255, 201, 77, 0.08); border: 1px solid rgba(255, 201, 77, 0.28);
font-size: 13px; color: var(--text-dim);
}
.evp-owner-bar b { color: var(--text); }
.evp-owner-bar a { color: #ffd166; font-weight: 700; text-decoration: none; margin-left: auto; }
.evp-hero-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #a9b6ac; }
.evp-hero-meta a { color: inherit; text-decoration: none; font-weight: 700; }
.evp-hero-meta a:hover { color: #ffd166; }
/* Таблица лидеров */
.evp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.evp-table th {
text-align: left; padding: 6px 8px; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em; color: #7f8b83;
border-bottom: 1px solid var(--line);
}
.evp-table td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.evp-table tr:last-child td { border-bottom: 0; }
.evp-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.evp-table .evp-pts { font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 600; color: #ffd166; }
.evp-table .evp-dim { color: #7f8b83; font-size: 12px; }
.evp-place { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 8px; font-family: 'Oswald', sans-serif; font-size: 13px; color: #7f8b83; background: rgba(255,255,255,.04); }
.evp-place-1 { color: #1a1200; background: linear-gradient(160deg, #ffd166, #f2a93b); }
.evp-place-2 { color: #1a1200; background: linear-gradient(160deg, #e3e9e5, #a9b6ac); }
.evp-place-3 { color: #1a1200; background: linear-gradient(160deg, #e0a45a, #c98a2a); }
.evp-row-me td { background: rgba(255, 201, 77, 0.10); }
.evp-row-me td:first-child { border-left: 3px solid #ffd166; }
.evp-name { font-weight: 600; color: #eef3ee; }
.evp-name a { color: inherit; text-decoration: none; }
.evp-name a:hover { color: #ffd166; }
.evp-clan { font-size: 11px; font-weight: 700; color: #49d8c2; margin-right: 6px; }
.evp-you { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #ffd166; margin-left: 6px; }
.evp-me-sep td { padding: 4px 8px; text-align: center; color: #7f8b83; font-size: 12px; border-bottom: 0; }
.evp-table-wrap { overflow-x: auto; }
.evp-more { margin-top: 10px; background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 8px; padding: 8px 14px; cursor: pointer; font: inherit; }
.evp-more:hover { border-color: var(--border-strong); color: var(--text); }
/* Плитки сумм в панели героя */
.evp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.evp-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line-soft); }
.evp-tile-num { font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 600; color: #eef3ee; line-height: 1; }
.evp-tile-label { font-size: 11px; color: #7f8b83; text-transform: uppercase; letter-spacing: .05em; }
.evp-tile-me .evp-tile-num { color: #ffd166; }
/* Лента боёв */
.evp-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.evp-feed li { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.03); }
.evp-feed-who { font-weight: 600; }
.evp-feed-what { font-size: 12.5px; color: #a9b6ac; margin-top: 2px; }
.evp-feed-pts { font-family: 'Oswald', sans-serif; font-size: 16px; color: var(--green); white-space: nowrap; }
.evp-feed-when { font-size: 11px; color: #7f8b83; text-align: right; }
/* Общая цель */
.evp-pool-num { font-family: 'Oswald', sans-serif; font-size: 30px; font-weight: 600; color: #ffd166; line-height: 1; }
.evp-pool-goal { color: #7f8b83; font-size: 13px; margin-left: 6px; }
.evp-pool-pct { font-size: 12px; color: #a9b6ac; margin-top: 6px; }
/* Табло для OBS */
.evp-obs { display: grid; gap: 12px; }
.evp-obs-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); }
.evp-obs-title { font-weight: 700; font-size: 14px; }
.evp-obs-sub { font-size: 12px; color: #7f8b83; margin-top: 2px; }
.evp-obs-copy { background: rgba(255, 201, 77, 0.1); border: 1px solid rgba(255, 201, 77, 0.35); color: #ffd166; border-radius: 8px; padding: 7px 12px; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.evp-obs-copy:hover { background: rgba(255, 201, 77, 0.18); }
.evp-obs-preview { margin-top: 4px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #0a0e0c url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect width="8" height="8" fill="%23141a16"/><rect x="8" y="8" width="8" height="8" fill="%23141a16"/></svg>'); }
.evp-obs-preview iframe { display: block; width: 100%; height: 230px; border: 0; }
.evp-obs-hint { font-size: 12px; color: #7f8b83; line-height: 1.5; }
/* Обложка в кабинете */
.ev-mine-cover { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; }
.ev-mine-cover img { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.ev-mine-cover-empty { color: var(--text-faint); }
.ev-mine-cover-btn { cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; }
.ev-mine-cover-btn:hover { border-color: var(--border-strong); }
.ev-mine-cover button { background: none; border: 0; color: var(--text-dim); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; }
@media (max-width: 760px), (max-width: 1000px) and (max-height: 520px) {
.evp-tiles { grid-template-columns: 1fr 1fr; }
.evp-obs-item { grid-template-columns: 1fr; }
}
/* ===== Карточка мероприятия в кабинете =====
Разложена по задачам: открыть страницу → ссылка для зрителей → цифры →
редкое (OBS, обложка, закрытие) под сворачиванием. */
.evm-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 16px 18px;
display: grid;
gap: 14px;
}
.evm-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.evm-cover {
width: 92px; height: 56px; border-radius: 8px; overflow: hidden;
background: var(--surface-2); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
}
.evm-cover img { width: 100%; height: 100%; object-fit: cover; }
.evm-cover span { font-size: 11px; color: var(--text-faint); }
.evm-head-main { min-width: 0; }
.evm-badges { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.evm-state {
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
color: var(--text-faint);
}
.evm-state--live { color: var(--green); }
.evm-state--done { color: var(--text-faint); }
.evm-vis { font-size: 11.5px; color: var(--text-faint); }
.evm-title { margin: 0 0 3px; font-size: 18px; line-height: 1.2; }
.evm-dates { margin: 0; font-size: 13px; color: var(--text-dim); }
.evm-open {
display: inline-flex; align-items: center; white-space: nowrap;
padding: 10px 16px; border-radius: 10px;
background: var(--accent); color: var(--accent-ink);
font-weight: 700; font-size: 14px; text-decoration: none;
}
.evm-open:hover { background: var(--amber-2); }
/* Ссылка для зрителей — главное действие после «открыть» */
.evm-share {
background: rgba(255, 201, 77, 0.06);
border: 1px solid rgba(255, 201, 77, 0.22);
border-radius: 10px; padding: 12px 14px;
}
.evm-share-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.evm-share-hint { margin: 4px 0 10px; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.evm-share-row { display: flex; gap: 8px; }
.evm-share-row input {
flex: 1; min-width: 0; background: var(--bg-deep); border: 1px solid var(--border);
border-radius: 8px; color: var(--text); padding: 9px 11px; font: inherit; font-size: 13.5px;
}
.evm-copy-main {
background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px;
padding: 9px 16px; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.evm-copy-main:hover { background: var(--amber-2); }
/* Цифры аудитории */
.evm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.evm-stat {
display: flex; flex-direction: column; gap: 2px; padding: 9px 12px;
border-radius: 8px; background: rgba(255, 255, 255, .03);
}
.evm-stat b { font-family: 'Oswald', sans-serif; font-size: 19px; font-weight: 600; line-height: 1; }
.evm-stat span { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
/* Свёрнутые разделы */
.evm-fold { border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; }
.evm-fold > summary {
cursor: pointer; padding: 11px 0; font-weight: 700; font-size: 14px;
display: flex; align-items: baseline; gap: 10px; list-style: revert;
}
.evm-fold[open] > summary { border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; }
.evm-fold-note { font-size: 12px; font-weight: 400; color: var(--text-faint); }
.evm-fold-hint { font-size: 12.5px; color: var(--text-faint); line-height: 1.5; margin: 10px 0 12px; }
.evm-fold code { background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.evm-obs { display: grid; gap: 8px; }
.evm-obs-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.03);
}
.evm-obs-row b { display: block; font-size: 14px; }
.evm-obs-row span { display: block; font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.evm-setting {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.evm-setting:last-child { border-bottom: 0; padding-bottom: 14px; }
.evm-setting b { display: block; font-size: 14px; }
.evm-setting > div:first-child span { display: block; font-size: 12.5px; color: var(--text-faint); margin-top: 2px; line-height: 1.45; }
.evm-setting-actions { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.evm-btn, .evm-ghost, .evm-danger, .evm-obs-row button, .evm-pending-row button {
background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
color: var(--text); padding: 8px 13px; font: inherit; font-size: 13.5px; cursor: pointer;
}
.evm-btn:hover, .evm-obs-row button:hover, .evm-pending-row button:hover { border-color: var(--border-strong); }
.evm-ghost { background: none; color: var(--text-dim); }
.evm-danger { background: none; border-color: rgba(255, 93, 93, .4); color: #ff8b7a; }
.evm-danger:hover { background: rgba(255, 93, 93, .12); }
/* Заявки — на виду, они ждут действия */
.evm-pending {
border: 1px solid rgba(73, 216, 194, .3); background: rgba(73, 216, 194, .07);
border-radius: 10px; padding: 12px 14px;
}
.evm-pending-head { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #49d8c2; margin-bottom: 8px; }
.evm-pending-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.evm-pending-row span { flex: 1; font-weight: 600; }
@media (max-width: 700px) {
.evm-head { grid-template-columns: auto 1fr; }
.evm-open { grid-column: 1 / -1; justify-content: center; }
.evm-setting, .evm-obs-row { flex-direction: column; align-items: flex-start; }
}
/* Интересные факты на странице мероприятия */
.evp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.evp-fact {
padding: 12px 14px; border-radius: 10px;
background: rgba(255, 255, 255, .03); border: 1px solid var(--line-soft);
}
.evp-fact-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #7f8b83; }
.evp-fact-value {
font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 600; line-height: 1.1;
color: #ffd166; margin: 6px 0 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.evp-fact-who { font-size: 13.5px; font-weight: 600; color: #eef3ee; }
.evp-fact-note { font-size: 12px; color: #7f8b83; margin-top: 2px; }
.evp-facts-hint { font-size: 12px; color: #7f8b83; line-height: 1.5; margin: 12px 0 0; }
/* Факт, у которого значение — не число, а ник или тег клана: крупный
Oswald там режется многоточием, поэтому шрифт мельче и перенос разрешён. */
.evp-fact-value--text {
font-family: inherit; font-size: 16px; font-weight: 700;
white-space: normal; word-break: break-word; line-height: 1.25;
}
/* Форма: кнопки и блокировка условий при правке */
.ev-form-actions { display: flex; align-items: center; gap: 10px; }
.ev-rules { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
.ev-rules[disabled] { opacity: .5; }
/* Состав участников в кабинете */
.evm-head-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.evm-roster { display: grid; gap: 2px; margin-bottom: 4px; }
.evm-roster-row {
display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
padding: 7px 10px; border-radius: 8px;
}
.evm-roster-row:nth-child(odd) { background: rgba(255, 255, 255, .03); }
.evm-roster-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evm-roster-clan { color: #49d8c2; font-size: 11px; font-weight: 700; }
.evm-roster-num { font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 700px) {
.evm-head-actions { grid-column: 1 / -1; }
.evm-roster-row { grid-template-columns: 1fr auto; }
.evm-roster-num { grid-column: 1; }
}
/* Подпись автора в шапке мероприятия: у ивента блогера имя ведущего важнее
строчки с призом, которая и так есть отдельной карточкой. */
.evp-host { display: inline-flex; align-items: center; gap: 12px; }
.evp-host-avatar {
width: 42px; height: 42px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 600;
color: var(--accent-ink);
background: linear-gradient(160deg, #ffd166, #f2a93b);
box-shadow: 0 6px 18px rgba(242, 169, 59, .35);
}
.evp-host-text { display: flex; flex-direction: column; gap: 1px; }
.evp-host-label {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
color: #a9b6ac;
}
.evp-host-name {
font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600;
letter-spacing: .01em; color: #ffd166; line-height: 1.15;
}
.evp-host-name a { color: inherit; text-decoration: none; }
.evp-host-name a:hover { color: #fff; }
/* Пикеры кланов и техники, призы по местам */
.ev-picked { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-picked:not(:empty) { margin-bottom: 6px; }
.ev-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 8px 5px 10px; border-radius: 999px;
background: rgba(255, 201, 77, .1); border: 1px solid rgba(255, 201, 77, .3);
font-size: 13px; font-weight: 600;
}
.ev-chip i { font-style: normal; font-weight: 400; color: var(--text-faint); }
.ev-chip button {
background: none; border: 0; color: var(--text-dim); cursor: pointer;
font-size: 16px; line-height: 1; padding: 0 2px;
}
.ev-chip button:hover { color: #ff8b7a; }
.ev-suggest {
display: grid; margin-top: 4px; border: 1px solid var(--border); border-radius: 8px;
background: var(--surface-2); overflow: hidden; max-height: 260px; overflow-y: auto;
}
.ev-suggest button {
text-align: left; background: none; border: 0; color: var(--text);
padding: 9px 12px; font: inherit; font-size: 13.5px; cursor: pointer;
border-bottom: 1px solid var(--line-soft);
}
.ev-suggest button:last-child { border-bottom: 0; }
.ev-suggest button:hover { background: rgba(255, 201, 77, .1); }
.ev-suggest i { font-style: normal; color: var(--text-faint); font-size: 12px; }
.ev-prizes { display: grid; gap: 6px; }
.ev-prize-row { display: grid; grid-template-columns: 74px 1fr auto; gap: 8px; align-items: center; }
.ev-prize-place {
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-faint); text-align: right;
}
.ev-prize-add { justify-self: start; margin-top: 8px; }
/* Подсказка под полем формы */
.ev-field-hint { font-size: 12px; color: var(--text-faint); line-height: 1.5; }
/* Описание мероприятия пишет посторонний: ссылки в нём отмечаем акцентом,
чтобы человек видел, что уходит наружу. */
.gp-lead a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.gp-lead a:hover { color: #fff; }
.gp-lead p { margin: 0 0 8px; }
.gp-lead p:last-child { margin-bottom: 0; }
/* Табло для OBS на странице мероприятия — свёрнутый блок: он нужен только
тем, кто стримит, а остальным важнее лидерборд. */
.evp-obs-card { padding-top: 0; padding-bottom: 0; }
.evp-obs-card[open] { padding-bottom: 20px; }
.evp-obs-summary {
cursor: pointer;
margin: 0;
padding: 18px 0;
display: flex;
align-items: baseline;
gap: 10px;
list-style: revert;
}
.evp-obs-card[open] .evp-obs-summary { padding-bottom: 12px; }
.evp-obs-count {
font-size: 12px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--text-faint);
}