/* ── Settings/Logout кластер — ещё плотнее ── */
#globalTopbar > .topbar-icon-group {
gap: 6px !important;
}
/* Раньше тут «склеивали» обе иконки как сегментированную пару
(settings без правых скруглений, logout без левых + без border-left).
Из-за этого у logout-кнопки левый внешний край визуально обрезался.
Теперь — каждая иконка как отдельная капсула с собственными
скруглениями + border со всех сторон, расстояние держит gap. */
#globalTopbar > .topbar-icon-group > .settings-gear-btn {
border-radius: 4px !important;
border-left: 1px solid rgba(120, 160, 60, 0.18) !important;
}
/* ── В бою XP-шкала более прозрачная ──
Сама шкала и заливка — alpha ~50%. Текст внутри остаётся как есть.
*/
body.in-battle #globalTopbar > .topbar-xpbar {
opacity: 0.55 !important;
}
body.in-battle #globalTopbar > .topbar-xpbar:hover {
opacity: 0.95;
}
/* ════════════════════════════════════════════════════════════════
▼ INTEGRATED UI — единый интерфейс вместо плавающих карточек ▼
Раньше каждая зона меню (Друзья / Битва / Команда) была отдельной
floating-карточкой со своим border/border-radius/shadow. Получался
эффект «приклеенных стикеров». Теперь:
• Фон #mainMenu — единый dark-зелёный градиент (под палитру шапки).
• .menu-panel теряет card-look (нет фона/border/radius/shadow).
Остаётся только flexbox-структура для расположения детей.
• Внутренние секции разделяются ТОНКОЙ линией снизу вместо рамок.
• Заголовки секций (h3, side-block-title) — uppercase
с легчайшим бордером, плотно лежат на общем фоне.
• Интерактивные элементы (кнопки, инпуты, list-rows) сохраняют
контраст с фоном — это единственный визуальный «hierarchy»
теперь.
════════════════════════════════════════════════════════════════ */
/* Единый фон меню — продолжение топбар-палитры. */
#mainMenu.active {
background:
radial-gradient(ellipse at top, rgba(50, 70, 30, 0.18), transparent 65%),
linear-gradient(180deg, rgba(28, 38, 22, 0.88) 0%, rgba(20, 28, 14, 0.92) 100%) !important;
}
/* Снимаем card-look с панелей. */
#mainMenu .menu-panel {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 18px 22px !important;
}
/* Колонки разделяются вертикальной линией вместо собственных рамок. */
#mainMenu .menu-columns {
gap: 0 !important;
padding: 0 !important;
}
#mainMenu .menu-panel + .menu-panel {
border-left: 1px solid rgba(120, 160, 60, 0.12) !important;
}
/* Заголовок секции (h3 'БИТВА', etc) — рамка вместо отдельной плашки. */
#mainMenu .menu-panel h3 {
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(120, 160, 60, 0.18) !important;
border-radius: 0 !important;
padding: 0 0 10px !important;
margin: 0 0 16px !important;
text-align: left !important;
color: #c8d8a0 !important;
letter-spacing: 3px !important;
font-size: 13px !important;
}
/* Side-block (Друзья / Команда) — теряют card, разделяются линией. */
#mainMenu .side-block {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
#mainMenu .side-block + .side-block {
margin-top: 18px !important;
padding-top: 18px !important;
border-top: 1px solid rgba(120, 160, 60, 0.12) !important;
}
#mainMenu .side-block-header {
margin-bottom: 10px !important;
}
#mainMenu .side-block-title {
color: #a8c280 !important;
font-size: 11px !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
}
/* Battle-grid sub-columns — разделители вместо собственных карточек. */
#mainMenu .battle-grid {
gap: 0 !important;
}
#mainMenu .battle-grid > * + * {
border-left: 1px solid rgba(120, 160, 60, 0.10) !important;
padding-left: 18px !important;
margin-left: 18px !important;
}
/* Tank showcase frame — keep структурный border, но без glow/shadow */
#mainMenu .showcase-frame {
background: rgba(10, 14, 8, 0.45) !important;
border: 1px solid rgba(120, 160, 60, 0.18) !important;
border-radius: 6px !important;
box-shadow: none !important;
}
#mainMenu .showcase-header {
color: #a8c280 !important;
font-size: 11px !important;
letter-spacing: 2.5px !important;
margin-bottom: 8px !important;
}
/* Map preview frame — same treatment */
#mainMenu .battle-map-preview {
background: rgba(10, 14, 8, 0.45) !important;
border: 1px solid rgba(120, 160, 60, 0.18) !important;
border-radius: 6px !important;
box-shadow: none !important;
}
/* Friend rows / battle items / mission rows — интерактивные элементы
ОСТАЮТСЯ контрастными к фону. Это единственная визуальная иерархия. */
#mainMenu .friend-row {
background: rgba(10, 14, 8, 0.55) !important;
border: 1px solid rgba(120, 160, 60, 0.10) !important;
border-radius: 4px !important;
}
#mainMenu .friend-row:hover {
background: rgba(15, 20, 10, 0.7) !important;
border-color: rgba(150, 200, 80, 0.20) !important;
}
#mainMenu .battle-item {
background: rgba(10, 14, 8, 0.55) !important;
border: 1px solid rgba(120, 160, 60, 0.10) !important;
border-radius: 4px !important;
}
#mainMenu .battle-item:hover {
background: rgba(15, 20, 10, 0.7) !important;
}
/* Selectors / labels — спокойнее, без отдельных коробок */
#mainMenu .mode-label {
color: #8aa468 !important;
letter-spacing: 2px !important;
font-size: 10px !important;
}
/* ════════════════════════════════════════════════════════════════
▼ TOPBAR — финальный полированный вид (v3) ▼
• Mature унифицированный набор кнопок без 'детских' акцентов.
• Settings/Logout: квадратные кнопки с одинаковым radius (без
segmented-control обрезки).
• XP-шкала в бою скрывается полностью (опция: opacity не нужна).
• Перенарисованный margin-left:auto под новый HTML-порядок:
emblem|callsign|xpbar ⇠⇠ crystals HoF/Hangar missions ⇠⇠ ⚙ ↩
════════════════════════════════════════════════════════════════ */
/* XP-шкала растягивается на всё доступное пространство — как было
изначально. Раньше тут стоял max-width:280 + flex:0 — это и
обрезало шкалу до маленькой коробочки. */
#globalTopbar > .topbar-xpbar {
flex: 1 1 auto !important;
min-width: 240px !important;
}
/* Спейсер — всё начиная с crystals уезжает к правому краю */
#globalTopbar > .crystals-display { margin-left: auto !important; }
/* Старые spacers убрать */
#globalTopbar > .topbar-btn-hof,
#globalTopbar > .topbar-btn-hangar,
#globalTopbar > .topbar-btn-missions { margin-left: 0 !important; }
/* Порядок капсул визуально: crystals, HoF/hangar, missions, icon-group.
Между ними — небольшой gap (общий gap у .menu-topbar). */
/* В бою — полностью скрываем XP-шкалу (даже не opacity). */
body.in-battle #globalTopbar > .topbar-xpbar {
display: none !important;
}
/* ── Унифицированный вид капсул ──
• Тонкий равномерный border со всех сторон (без 3px цветовой
полоски слева — пользователь попросил убрать "палочки в начале
плашек").
*/
#globalTopbar > .topbar-btn,
#globalTopbar > .crystals-display {
height: 36px !important;
padding: 0 14px !important;
background: #1c2618 !important;
border: 1px solid rgba(120, 160, 60, 0.18) !important;
border-radius: 4px !important;
font-size: 11px !important;
letter-spacing: 1.2px !important;
color: #d4dcc4 !important;
text-transform: uppercase !important;
font-weight: 700 !important;
font-family: 'Black Ops One', 'Impact', sans-serif !important;
text-shadow: none !important;
box-shadow: none !important;
transition: background 0.12s, border-color 0.12s !important;
}
#globalTopbar > .topbar-btn:hover {
background: #243020 !important;
border-color: rgba(150, 200, 80, 0.30) !important;
}
/* Crystals — золотой акцент слева */
#globalTopbar > .crystals-display {
cursor: default;
}
#globalTopbar > .crystals-display span {
color: #ffd486 !important;
font-size: 14px !important;
font-family: 'Black Ops One', 'Impact', sans-serif !important;
text-shadow: none !important;
}
/* Hall of Fame — золотой акцент через текст/border, без left-strip */
#globalTopbar > .topbar-btn-hof {
color: #ffd486 !important;
}
#globalTopbar > .topbar-btn-hof:hover {
border-color: rgba(255, 212, 138, 0.40) !important;
}
/* Missions — нейтральный (оливковый). Палочка border-left убрана. */
/* В ангар — синий, без left-strip */
#globalTopbar > .topbar-btn-hangar {
color: #b0d8ff !important;
}
#globalTopbar > .topbar-btn-hangar:hover {
border-color: rgba(120, 180, 220, 0.30) !important;
}
/* Иконка слева внутри капсулы — приглушаем размер чтобы текст вёл */
#globalTopbar .topbar-btn-icon {
font-size: 13px !important;
line-height: 1 !important;
filter: none !important;
opacity: 0.85;
}
/* ── Settings + Logout: квадратные иконки ── */
#globalTopbar .topbar-icon-group {
gap: 4px !important;
margin-left: 4px !important;
}
#globalTopbar .topbar-icon-group > .settings-gear-btn {
width: 36px !important;
height: 36px !important;
padding: 0 !important;
background: #1c2618 !important;
border: 1px solid rgba(120, 160, 60, 0.18) !important;
border-radius: 4px !important; /* одинаковый radius на всех углах */
color: #d4dcc4 !important;
font-size: 16px !important;
transition: background 0.12s, border-color 0.12s, color 0.12s !important;
box-shadow: none !important;
}
#globalTopbar .topbar-icon-group > .settings-gear-btn:hover {
background: #243020 !important;
border-color: rgba(150, 200, 80, 0.30) !important;
color: #ffffff !important;
}
#globalTopbar .topbar-icon-group > .topbar-logout-btn {
color: #d88060 !important;
border-left: 1px solid rgba(120, 160, 60, 0.18) !important; /* override segmented-control */
border-top-left-radius: 4px !important;
border-bottom-left-radius: 4px !important;
}
#globalTopbar .topbar-icon-group > .topbar-logout-btn:hover {
color: #ff8866 !important;
border-color: rgba(220, 100, 80, 0.45) !important;
}
#globalTopbar .topbar-icon-group > .settings-gear-btn:first-child {
border-top-right-radius: 4px !important;
border-bottom-right-radius: 4px !important;
}
/* Bonus badge на missions — переоформление чтобы не царапало глаз */
#globalTopbar .topbar-btn-badge {
background: #c84030 !important;
box-shadow: none !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
font-size: 9px !important;
min-width: 16px !important;
height: 16px !important;
}
/* ════════════════════════════════════════════════════════════════
▼ TOPBAR v3 fine-tuning ▼
• Missions / Settings / Logout — серый подтон вместо оливкового.
Crystals и HoF остаются золотыми (валюта + достижения), Hangar
синим (информация о возврате в гараж), а вспомогательные кнопки
становятся нейтрально-серыми.
• Центрирование текста в капсулах: 3px left-border ел padding-left
и текст уезжал вправо. Компенсируем padding-left = 14 - 3 = 11.
════════════════════════════════════════════════════════════════ */
/* Симметричный padding с учётом 3px LEFT-border'а */
#globalTopbar > .topbar-btn {
padding-left: 11px !important;
padding-right: 14px !important;
}
/* Серая палитра для нейтральных кнопок */
#globalTopbar > .topbar-btn-missions {
background: #1d2126 !important;
border-color: rgba(160, 170, 180, 0.18) !important;
border-left-color: rgba(160, 170, 180, 0.45) !important;
color: #c0c8d0 !important;
}
#globalTopbar > .topbar-btn-missions:hover {
background: #252a30 !important;
border-color: rgba(180, 190, 200, 0.30) !important;
}
#globalTopbar .topbar-icon-group > .settings-gear-btn {
background: #1d2126 !important;
border-color: rgba(160, 170, 180, 0.18) !important;
color: #c0c8d0 !important;
}
#globalTopbar .topbar-icon-group > .settings-gear-btn:hover {
background: #252a30 !important;
border-color: rgba(180, 190, 200, 0.30) !important;
color: #ffffff !important;
}
/* Logout оставляем красноватый акцент (отличает от шестерёнки) —
только фон тоже серый. */
#globalTopbar .topbar-icon-group > .topbar-logout-btn {
background: #1d2126 !important;
}
/* ════════════════════════════════════════════════════════════════
▼ ANGAR / HANGAR — INTEGRATED UI ▼
Подгоняем гараж под ту же концепцию что и главное меню:
• НЕТ floating-карточек (.hangar-side, .hangar-bottom-bar)
• Шапка гаража интегрирована в общий topbar (наш #globalTopbar
уже сверху, внутренний .hangar-topbar теряет свой backdrop)
• Фон гаража — единый dark-зелёный (как меню), внутренний 3D
танк-canvas рендерится без внешних рамок
• Контраст оставляем только на интерактивных item-card'ах
════════════════════════════════════════════════════════════════ */
/* Внутренний hangar-topbar — теперь без подложки. Глобальный topbar
сверху уже даёт визуальное обрамление. Внутренний — только функциональные
элементы (back-кнопка, заголовок, consumables strip). */
#garageScreen .hangar-topbar {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Back-button в стиле новых топбар-кнопок (серый акцент). */
#garageScreen .hangar-back-btn {
height: 36px !important;
padding: 0 14px !important;
background: #1d2126 !important;
border: 1px solid rgba(160, 170, 180, 0.18) !important;
border-left: 3px solid rgba(160, 170, 180, 0.45) !important;
border-radius: 4px !important;
color: #c0c8d0 !important;
font-size: 11px !important;
letter-spacing: 1.2px !important;
backdrop-filter: none !important;
box-shadow: none !important;
}
#garageScreen .hangar-back-btn:hover {
background: #252a30 !important;
border-color: rgba(180, 190, 200, 0.30) !important;
color: #ffffff !important;
}
/* Внутренний hangar title — приглушаем (АНГАР дублируется со статусом
приложения; убирать совсем стрёмно — нужен для выравнивания layout). */
#garageScreen .hangar-title {
color: #a8c280 !important;
font-size: 14px !important;
letter-spacing: 4px !important;
text-shadow: none !important;
}
/* Side panels (КОРПУС / БАШНЯ) — теряют card-look. */
#garageScreen .hangar-side {
background: rgba(20, 28, 14, 0.65) !important; /* лёгкая тёмная полупрозрачность */
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
}
/* Левый panel — тонкий вертикальный divider справа */
#garageScreen .hangar-left {
border-right: 1px solid rgba(120, 160, 60, 0.18) !important;
}
/* Правый panel — тонкий вертикальный divider слева */
#garageScreen .hangar-right {
border-left: 1px solid rgba(120, 160, 60, 0.18) !important;
}
/* Panel-title (КОРПУС, БАШНЯ, СКИНЫ) — без своего фона/бордера, просто
текстовый заголовок с тонкой линией снизу. */
#garageScreen .hangar-panel-title {
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(120, 160, 60, 0.18) !important;
color: #a8c280 !important;
font-size: 11px !important;
letter-spacing: 2.5px !important;
text-shadow: none !important;
padding: 12px 14px 10px !important;
text-align: left !important;
}
/* Bottom bar (СКИНЫ) — теряет gradient overlay. */
#garageScreen .hangar-bottom-bar {
background: rgba(20, 28, 14, 0.65) !important;
border-top: 1px solid rgba(120, 160, 60, 0.18) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
padding-top: 0 !important;
}
#garageScreen .hangar-bottom-bar .hangar-panel-title {
border-bottom: none !important;
padding: 8px 14px 6px !important;
}
/* Item-card — единственное визуально контрастное в новом UI.
Hover/selected более выражено, чтобы было понятно что кликабельно. */
#garageScreen .item-card {
background: rgba(10, 14, 8, 0.55) !important;
border: 1px solid rgba(120, 160, 60, 0.10) !important;
border-radius: 4px !important;
}
#garageScreen .item-card:hover {
background: rgba(15, 22, 10, 0.75) !important;
border-color: rgba(150, 200, 80, 0.35) !important;
}
#garageScreen .item-card.selected,
#garageScreen .item-card.equipped {
background: rgba(40, 60, 22, 0.55) !important;
border-color: rgba(180, 220, 100, 0.50) !important;
}
/* Stats divider тонкий и спокойный */
#garageScreen .hangar-stats-divider {
background: rgba(120, 160, 60, 0.18) !important;
margin: 8px 14px !important;
}
/* Consumables strip — тёмная плашка пропадает, иконки на чистом фоне */
#garageScreen .hangar-consumables-strip .hangar-panel-title {
color: rgba(168, 194, 128, 0.70) !important;
border-bottom: none !important;
padding: 0 !important;
}
/* ════════════════════════════════════════════════════════════════
▼ HANGAR — LAYOUT v9 ▼
• Превью на ВСЮ высоту (от топбара до низа)
• Табы сдвинуты вправо (left = ширина превью)
• Припасы — интегрированный правый столбец без card-look,
отделён только тонкой линией
• Реальный фон ангара (рендерится Garage._drawHangarScene)
════════════════════════════════════════════════════════════════ */
body:has(#garageScreen.active) #globalTopbar {
background: linear-gradient(180deg,
rgba(28,38,22,0.92) 0%,
rgba(20,28,14,0.96) 100%) !important;
border-bottom: 1px solid rgba(120,160,60,0.22) !important;
box-shadow: 0 2px 18px rgba(0,0,0,0.35) !important;
}
#garageScreen { background: #0a0e07; }
#garageScreen .hangar-bg {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(180deg, #0c1208 0%, #060a04 100%);
}
#garageScreen > canvas#hangarCanvas { display: none; }
#garageScreen {
--hangar-side-w: 360px;
--hangar-supplies-w: 240px;
--hangar-bottom-h: 200px;
}
#garageScreen .hangar-panel {
position: absolute;
top: var(--topbar-h, 66px);
left: 0; right: 0; bottom: 0;
z-index: 11;
}
/* === АРЕНА с танком — центральная зона, без рамок === */
#garageScreen .hangar-arena {
position: absolute;
top: 0;
left: var(--hangar-side-w);
right: var(--hangar-supplies-w);
bottom: var(--hangar-bottom-h);
z-index: 1;
overflow: hidden;
background: transparent; /* фон рисует Garage._drawHangarScene в canvas */
}
#garageScreen .hangar-arena canvas#hangarCanvas {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 1 !important;
display: block !important;
}
/* === ЛЕВЫЙ САЙДБАР: превью НА ВСЮ ВЫСОТУ === */
#garageScreen .hangar-preview-zone {
position: absolute;
top: 0; left: 0;
bottom: 0; /* до самого низа */
width: var(--hangar-side-w);
z-index: 3;
display: flex;
flex-direction: column;
background: linear-gradient(180deg,
rgba(20,28,14,0.94) 0%,
rgba(12,18,8,0.97) 100%);
border-right: 1px solid rgba(120,160,60,0.22);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow: hidden;
}
#garageScreen .hangar-preview-header {
flex-shrink: 0;
padding: 14px 18px;
border-bottom: 1px solid rgba(120,160,60,0.18);
}
#garageScreen .hangar-back-btn {
appearance: none;
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 18px 0 14px;
background: linear-gradient(180deg,
rgba(80,120,40,0.55) 0%,
rgba(60,95,28,0.70) 100%);
border: 1px solid rgba(150,200,80,0.45);
border-left: 3px solid #b4dc64;
border-radius: 4px;
color: #e6f0c8;
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 12px;
letter-spacing: 2.5px;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(180,220,100,0.18);
}
#garageScreen .hangar-back-btn:hover {
background: linear-gradient(180deg,
rgba(100,150,50,0.7) 0%,
rgba(75,120,35,0.85) 100%);
border-color: rgba(180,220,100,0.65);
color: #ffffff;
transform: translateX(-2px);
box-shadow: 0 3px 12px rgba(80,140,40,0.35), inset 0 1px 0 rgba(180,220,100,0.25);
}
#garageScreen .hangar-back-arrow {
font-size: 14px;
color: #b4dc64;
line-height: 1;
transition: transform 0.15s;
}
#garageScreen .hangar-back-btn:hover .hangar-back-arrow {
transform: translateX(-3px);
}
#garageScreen .hangar-preview-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 18px 20px 14px;
scrollbar-width: thin;
scrollbar-color: rgba(120,160,60,0.35) transparent;
}
#garageScreen .hangar-preview-headline {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 4px;
}
#garageScreen .hangar-preview-name {
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 22px;
letter-spacing: 1.5px;
color: #e6f0c8;
}
#garageScreen .hangar-preview-stars {
font-size: 14px;
color: #ffcc44;
letter-spacing: 1px;
text-shadow: 0 0 8px rgba(255,200,80,0.4);
}
#garageScreen .hangar-preview-desc {
font-size: 12px;
line-height: 1.5;
color: rgba(168,194,128,0.78);
margin: 6px 0 14px;
min-height: 2.8em;
}
#garageScreen .hangar-preview-stats {
padding-top: 12px;
border-top: 1px solid rgba(120,160,60,0.18);
}
#garageScreen .hangar-preview-stats .hangar-pane-title {
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 9.5px;
letter-spacing: 2.5px;
color: rgba(168,194,128,0.6);
margin: 0 0 6px;
}
#garageScreen .hangar-preview-stats .tank-stats {
padding: 0;
width: 100%;
}
#garageScreen .hangar-preview-actions {
flex-shrink: 0;
padding: 12px 20px 18px;
border-top: 1px solid rgba(120,160,60,0.18);
display: flex;
flex-direction: column;
gap: 8px;
background: rgba(8,12,5,0.45);
}
#garageScreen .hangar-preview-action,
#garageScreen .hangar-preview-upgrade {
appearance: none;
width: 100%;
height: 42px;
padding: 0 14px;
border-radius: 4px;
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 12.5px;
letter-spacing: 2px;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.15s;
background: rgba(40,50,30,0.55);
color: rgba(168,194,128,0.7);
border-color: rgba(120,160,60,0.25);
}
#garageScreen .hangar-preview-action.is-equip {
background: linear-gradient(180deg, rgba(80,140,40,0.85), rgba(60,110,30,0.9));
border-color: rgba(140,200,60,0.6);
color: #ffffff;
box-shadow: 0 2px 10px rgba(80,140,40,0.4), inset 0 1px 0 rgba(180,220,100,0.3);
}
#garageScreen .hangar-preview-action.is-equip:hover {
background: linear-gradient(180deg, rgba(100,160,50,0.95), rgba(75,130,35,1));
transform: translateY(-1px);
}
#garageScreen .hangar-preview-action.is-equipped {
background: rgba(40,60,22,0.6);
border-color: rgba(180,220,100,0.45);
color: #b4dc64;
cursor: default;
}
/* СНЯТЬ для скинов — серая с hover-pulse-glow.
Активная (не disabled), отдельно от is-equipped чтобы не путаться. */
#garageScreen .hangar-preview-action.is-unequip {
background: linear-gradient(180deg, rgba(110,110,110,0.85), rgba(75,75,75,0.95));
border-color: rgba(180,180,180,0.55);
color: #e8e8e8;
box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(220,220,220,0.25);
cursor: pointer;
}
#garageScreen .hangar-preview-action.is-unequip:hover {
background: linear-gradient(180deg, rgba(140,140,140,0.95), rgba(95,95,95,1));
border-color: rgba(220,220,220,0.75);
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
}
#garageScreen .hangar-preview-action.is-unequip:active {
transform: translateY(0);
box-shadow: 0 1px 4px rgba(0,0,0,0.4), inset 0 1px 2px rgba(0,0,0,0.3);
}
#garageScreen .hangar-preview-action.is-buy {
background: linear-gradient(180deg, rgba(180,140,40,0.9), rgba(140,100,20,0.95));
border-color: rgba(220,180,80,0.6);
color: #fff8d8;
box-shadow: 0 2px 10px rgba(180,140,40,0.4), inset 0 1px 0 rgba(255,220,140,0.3);
}
#garageScreen .hangar-preview-action.is-buy:hover {
background: linear-gradient(180deg, rgba(210,160,55,1), rgba(160,115,25,1));
transform: translateY(-1px);
}
#garageScreen .hangar-preview-action.is-locked {
background: rgba(60,30,20,0.55);
border-color: rgba(170,80,60,0.4);
color: rgba(220,140,100,0.7);
cursor: not-allowed;
}
#garageScreen .hangar-preview-action:disabled,
#garageScreen .hangar-preview-upgrade:disabled { cursor: default; }
#garageScreen .hangar-preview-action:disabled:not(.is-equipped):not(.is-locked) { opacity: 0.6; }
#garageScreen .hangar-preview-upgrade {
height: 36px;
font-size: 11.5px;
background: linear-gradient(180deg, rgba(120,80,180,0.7), rgba(90,60,140,0.85));
border-color: rgba(170,130,220,0.5);
color: #f0e0ff;
box-shadow: 0 2px 8px rgba(120,80,180,0.3), inset 0 1px 0 rgba(200,170,240,0.25);
}
#garageScreen .hangar-preview-upgrade:hover:not(:disabled) {
background: linear-gradient(180deg, rgba(140,95,200,0.85), rgba(105,70,160,0.95));
transform: translateY(-1px);
}
#garageScreen .hangar-preview-upgrade:disabled {
background: rgba(40,40,55,0.5);
border-color: rgba(110,100,140,0.3);
color: rgba(180,170,210,0.55);
box-shadow: none;
}
/* === ПРИПАСЫ — ИНТЕГРИРОВАННЫЙ правый столбец, без card-look === */
#garageScreen .hangar-supplies-zone {
position: absolute;
top: 0; right: 0;
bottom: var(--hangar-bottom-h);
width: var(--hangar-supplies-w);
z-index: 3;
display: flex;
flex-direction: column;
background: transparent; /* интегрировано с ареной */
border-left: 1px solid rgba(120,160,60,0.22); /* только тонкая граница */
overflow: hidden;
}
#garageScreen .hangar-supplies-zone .hangar-zone-title {
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 11px;
letter-spacing: 3px;
color: rgba(168,194,128,0.75);
padding: 16px 20px 12px;
border-bottom: 1px solid rgba(120,160,60,0.18);
background: transparent;
flex-shrink: 0;
}
#garageScreen .consumable-cards-vertical {
display: flex;
flex-direction: column;
gap: 6px;
flex-wrap: nowrap;
padding: 12px 14px;
margin: 0;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(120,160,60,0.35) transparent;
}
#garageScreen .consumable-cards-vertical .consumable-card {
width: 100%;
flex: 0 0 auto;
padding: 8px 10px 8px 34px;
background: rgba(8,12,5,0.45);
border: 1px solid rgba(120,160,60,0.18);
border-radius: 4px;
flex-direction: row;
align-items: center;
text-align: left;
gap: 8px;
position: relative;
}
#garageScreen .consumable-cards-vertical .consumable-card .cc-key {
top: 50%;
left: 5px;
transform: translateY(-50%);
font-size: 10px;
padding: 1px 4px;
}
#garageScreen .consumable-cards-vertical .consumable-card .cc-icon {
width: 22px; height: 22px;
font-size: 17px;
flex-shrink: 0;
}
#garageScreen .consumable-cards-vertical .consumable-card .cc-name {
font-size: 10.5px;
flex: 1;
text-align: left;
}
#garageScreen .consumable-cards-vertical .consumable-card .cc-count {
font-size: 12px;
margin: 0;
}
#garageScreen .consumable-cards-vertical .consumable-card .cc-buy {
width: auto;
margin: 0;
padding: 2px 7px;
font-size: 10px;
}
/* === НИЖНЯЯ ПОЛОСА: табы + горизонтальный ряд карточек.
Сдвинута вправо — стартует ПОСЛЕ левого превью-сайдбара === */
#garageScreen .hangar-bottom {
position: absolute;
bottom: 0;
left: var(--hangar-side-w);
right: 0;
height: var(--hangar-bottom-h);
z-index: 4;
display: flex;
flex-direction: column;
background: linear-gradient(180deg,
rgba(8,12,6,0.0) 0%,
rgba(14,20,9,0.92) 18%,
rgba(10,14,7,0.98) 100%);
border-top: 1px solid rgba(120,160,60,0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 -8px 24px rgba(0,0,0,0.55);
}
#garageScreen .hangar-bottom .hangar-tabs {
display: flex;
align-items: stretch;
height: 44px;
background: rgba(8,12,5,0.55);
border-bottom: 1px solid rgba(120,160,60,0.22);
flex-shrink: 0;
padding: 0 18px;
}
#garageScreen .hangar-tab {
appearance: none;
background: transparent;
border: none;
color: rgba(168,194,128,0.55);
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 13px;
letter-spacing: 3px;
padding: 0 26px;
cursor: pointer;
position: relative;
transition: color 0.15s, background 0.15s;
}
#garageScreen .hangar-tab:hover { color: #c8d8a8; background: rgba(80,120,40,0.10); }
#garageScreen .hangar-tab.active { color: #e6f0c8; }
#garageScreen .hangar-tab.active::after {
content: "";
position: absolute;
left: 22px; right: 22px; bottom: -1px;
height: 2px;
background: linear-gradient(90deg, transparent, #b4dc64 20%, #b4dc64 80%, transparent);
box-shadow: 0 0 10px rgba(180,220,100,0.6);
}
#garageScreen .hangar-bottom .hangar-cards-pane {
flex: 1;
overflow-x: auto;
overflow-y: hidden;
padding: 14px 18px;
scrollbar-width: thin;
scrollbar-color: rgba(120,160,60,0.35) transparent;
}
#garageScreen .hangar-cards-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 10px;
height: 100%;
align-items: stretch;
}
#garageScreen .hangar-cards-row.hangar-pane-hidden { display: none !important; }
#garageScreen .hangar-cards-row .item-card {
flex: 0 0 150px;
width: 150px;
background: rgba(15,22,10,0.7);
border: 1px solid rgba(120,160,60,0.18);
border-radius: 5px;
padding: 10px;
margin: 0;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, transform 0.12s;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 4px;
}
#garageScreen .hangar-cards-row .item-card:hover {
background: rgba(25,35,14,0.85);
border-color: rgba(150,200,80,0.45);
transform: translateY(-2px);
}
#garageScreen .hangar-cards-row .item-card.is-focused {
border-color: #6cc4ff;
background: rgba(15,30,40,0.55);
box-shadow: inset 0 0 0 1px rgba(108,196,255,0.25);
}
#garageScreen .hangar-cards-row .item-card.selected,
#garageScreen .hangar-cards-row .item-card.equipped {
border-color: #b4dc64;
background: rgba(40,60,22,0.55);
box-shadow: inset 0 0 0 1px rgba(180,220,100,0.30);
}
#garageScreen .hangar-cards-row .item-card-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 100%;
}
#garageScreen .hangar-cards-row .item-card canvas {
width: 86px !important;
height: 54px !important;
border-radius: 3px;
background: rgba(0,0,0,0.40);
border: 1px solid rgba(80,120,40,0.20);
}
#garageScreen .hangar-cards-row .item-card-info { width: 100%; }
#garageScreen .hangar-cards-row .item-card h4 {
font-size: 12px;
margin: 0 0 2px;
color: #d8e8b8;
letter-spacing: 0.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#garageScreen .hangar-cards-row .item-card .turret-level-stars {
color: rgba(255,200,80,0.6);
font-size: 9px;
letter-spacing: 0.5px;
}
#garageScreen .hangar-cards-row .item-card p,
#garageScreen .hangar-cards-row .item-card .upgrade-bonus,
#garageScreen .hangar-cards-row .item-card .upgrade-max { display: none; }
#garageScreen .hangar-cards-row .item-card .locked-text {
display: block;
color: #cc7755;
font-size: 9.5px;
letter-spacing: 0.3px;
}
#garageScreen .hangar-cards-row .item-card .buy-btn,
#garageScreen .hangar-cards-row .item-card .equip-btn,
#garageScreen .hangar-cards-row .item-card .upgrade-btn { display: none !important; }
@media (max-width: 1280px) {
#garageScreen { --hangar-side-w: 320px; --hangar-supplies-w: 220px; }
}
@media (max-width: 1024px) {
#garageScreen { --hangar-side-w: 290px; --hangar-supplies-w: 200px; --hangar-bottom-h: 180px; }
}
/* ─── v9.1 — карточки красивее, корнер-бейджи ─── */
/* Карточки с градиентом и более выраженным hover */
#garageScreen .hangar-cards-row .item-card {
background:
linear-gradient(180deg, rgba(28,38,18,0.85) 0%, rgba(12,18,8,0.92) 100%);
position: relative;
overflow: hidden;
padding: 10px 10px 12px !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
#garageScreen .hangar-cards-row .item-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 70%;
background: radial-gradient(ellipse at 50% 0%, rgba(180,220,100,0.06) 0%, rgba(0,0,0,0) 70%);
pointer-events: none;
z-index: 0;
}
#garageScreen .hangar-cards-row .item-card-inner { position: relative; z-index: 1; }
/* Иконка крупнее, с лёгким свечением снизу */
#garageScreen .hangar-cards-row .item-card canvas {
width: 110px !important;
height: 64px !important;
border-radius: 4px !important;
background:
radial-gradient(ellipse at 50% 100%, rgba(80,120,40,0.18) 0%, rgba(0,0,0,0.5) 70%) !important;
border: 1px solid rgba(120,160,60,0.30) !important;
margin: 4px 0 6px;
}
/* Имя — ярче и крупнее */
#garageScreen .hangar-cards-row .item-card h4 {
font-family: 'Black Ops One', 'Impact', sans-serif !important;
font-size: 12.5px !important;
color: #e6f0c8 !important;
letter-spacing: 0.8px !important;
margin-top: 2px !important;
}
/* Звёзды башен крупнее и заметнее */
#garageScreen .hangar-cards-row .item-card .turret-level-stars {
color: #ffcc44 !important;
font-size: 11px !important;
letter-spacing: 1px !important;
text-shadow: 0 0 6px rgba(255,200,80,0.5) !important;
display: block;
margin-top: 2px;
}
/* === КОРНЕР-БЕЙДЖИ === */
/* Цена покупки — золотой пилл в правом верхнем углу.
Показываем кнопку buy-btn как бейдж (не интерактивный). */
#garageScreen .hangar-cards-row .item-card .buy-btn {
display: inline-block !important;
position: absolute;
top: 6px; right: 6px;
padding: 2px 7px !important;
font-size: 10px !important;
font-weight: 700;
background: linear-gradient(180deg, rgba(220,170,55,0.92), rgba(170,125,30,0.95)) !important;
color: #fff8d8 !important;
border: 1px solid rgba(240,200,100,0.6) !important;
border-radius: 10px !important;
pointer-events: none !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,220,140,0.3);
letter-spacing: 0.3px;
z-index: 2;
}
/* Лок-бейдж для locked */
#garageScreen .hangar-cards-row .item-card.locked::before {
background: rgba(0,0,0,0.45);
height: 100%;
}
#garageScreen .hangar-cards-row .item-card .locked-text {
display: inline-block !important;
position: absolute;
top: 6px; right: 6px;
padding: 2px 7px !important;
font-size: 9.5px !important;
background: rgba(80,30,20,0.85) !important;
color: #ffaa88 !important;
border: 1px solid rgba(180,90,60,0.6) !important;
border-radius: 10px !important;
letter-spacing: 0.3px;
z-index: 2;
text-transform: uppercase;
line-height: 1.2;
}
/* Чек-бейдж для экипированного — небольшая зелёная метка */
#garageScreen .hangar-cards-row .item-card.selected::after,
#garageScreen .hangar-cards-row .item-card.equipped::after {
content: "✓";
position: absolute;
top: 4px; right: 6px;
width: 20px; height: 20px;
line-height: 20px;
text-align: center;
background: linear-gradient(180deg, rgba(120,200,40,0.95), rgba(80,160,30,1));
color: #ffffff;
font-weight: 900;
font-size: 12px;
border-radius: 50%;
border: 1px solid rgba(180,220,100,0.7);
box-shadow: 0 2px 6px rgba(80,140,40,0.5);
z-index: 3;
}
/* Hover-эффект сильнее */
#garageScreen .hangar-cards-row .item-card:hover {
transform: translateY(-3px) !important;
box-shadow: 0 6px 14px rgba(0,0,0,0.5), 0 0 0 1px rgba(150,200,80,0.25);
}
/* Sync hangar-back-btn (МЕНЮ) с прежним стилем не трогаем */
/* ─── v9.3 — палитра ангара = палитра главного меню ─── */
/* Подложка ангара (фон тоев же экрана за зонами) — как у меню */
#garageScreen .hangar-bg {
background:
radial-gradient(ellipse at top, rgba(50, 70, 30, 0.18), transparent 65%),
linear-gradient(180deg, rgba(28, 38, 22, 0.88) 0%, rgba(20, 28, 14, 0.92) 100%) !important;
}
/* Превью-сайдбар — та же зелёно-оливковая палитра, не темнее меню */
#garageScreen .hangar-preview-zone {
background: linear-gradient(180deg,
rgba(28, 38, 22, 0.88) 0%,
rgba(20, 28, 14, 0.92) 100%) !important;
border-right: 1px solid rgba(120, 160, 60, 0.18) !important;
}
/* Нижняя полоса — та же палитра, без тёмного "уплотнения" снизу */
#garageScreen .hangar-bottom {
background: linear-gradient(180deg,
rgba(28, 38, 22, 0.88) 0%,
rgba(20, 28, 14, 0.92) 100%) !important;
border-top: 1px solid rgba(120, 160, 60, 0.18) !important;
box-shadow: none !important;
}
/* Заголовок-полоса табов внутри bottom-strip — лёгкая подсветка как
у menu-panel-title, без своей тёмной подложки */
#garageScreen .hangar-bottom .hangar-tabs {
background: transparent !important;
border-bottom: 1px solid rgba(120, 160, 60, 0.18) !important;
}
/* Припасы остаются прозрачными, тонкая разделительная линия в палитре меню */
#garageScreen .hangar-supplies-zone {
border-left: 1px solid rgba(120, 160, 60, 0.18) !important;
}
#garageScreen .hangar-supplies-zone .hangar-zone-title {
border-bottom: 1px solid rgba(120, 160, 60, 0.18) !important;
}
/* Кнопки-блок снизу превью — лёгкое затемнение в той же гамме */
#garageScreen .hangar-preview-actions {
background: rgba(20, 28, 14, 0.35) !important;
border-top: 1px solid rgba(120, 160, 60, 0.18) !important;
}
/* Шапка превью с кнопкой В МЕНЮ — её border-bottom в той же палитре */
#garageScreen .hangar-preview-header {
border-bottom: 1px solid rgba(120, 160, 60, 0.18) !important;
}
/* Stats-разделитель в превью */
#garageScreen .hangar-preview-stats {
border-top-color: rgba(120, 160, 60, 0.18) !important;
}
/* ─── v9.4 — палитра глубже + полная переработка ПРИПАСОВ ─── */
/* Палитра ангара/меню на ~7% темнее: rgb(28,38,22)→(25,34,19),
rgb(20,28,14)→(17,24,12). Применяем и к меню, и к зонам ангара,
чтобы не разъезжаться. */
#mainMenu.active {
background:
radial-gradient(ellipse at top, rgba(46, 64, 28, 0.18), transparent 65%),
linear-gradient(180deg, rgba(25, 34, 19, 0.92) 0%, rgba(17, 24, 12, 0.96) 100%) !important;
}
#garageScreen .hangar-bg {
background:
radial-gradient(ellipse at top, rgba(46, 64, 28, 0.18), transparent 65%),
linear-gradient(180deg, rgba(25, 34, 19, 0.92) 0%, rgba(17, 24, 12, 0.96) 100%) !important;
}
#garageScreen .hangar-preview-zone {
background: linear-gradient(180deg,
rgba(25, 34, 19, 0.92) 0%,
rgba(17, 24, 12, 0.96) 100%) !important;
}
#garageScreen .hangar-bottom {
background: linear-gradient(180deg,
rgba(25, 34, 19, 0.92) 0%,
rgba(17, 24, 12, 0.96) 100%) !important;
}
body:has(#garageScreen.active) #globalTopbar {
background: linear-gradient(180deg,
rgba(25, 34, 19, 0.94) 0%,
rgba(17, 24, 12, 0.98) 100%) !important;
}
/* ════════════════════════════════════════════════════════════════
▼ ПРИПАСЫ — полная переработка карточек ▼
Вертикальная компоновка: header (key + name + count),
крупная иконка по центру, единая кнопка покупки внизу.
Свои SVG-иконки.
════════════════════════════════════════════════════════════════ */
#garageScreen .hangar-supplies-zone .hangar-zone-title {
padding: 14px 18px 10px !important;
font-size: 11px !important;
letter-spacing: 3px !important;
color: rgba(168,194,128,0.80) !important;
}
#garageScreen .hangar-supplies-zone .hangar-panel-subtitle {
color: rgba(168,194,128,0.40) !important;
font-weight: normal;
font-size: 9.5px;
letter-spacing: 1px;
margin-left: 4px;
}
#garageScreen .consumable-cards-vertical {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
padding: 12px 12px 14px !important;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(120,160,60,0.30) transparent;
}
/* Карточка — полностью переписана, без старого «padding-left:38px» layout'а */
#garageScreen .consumable-cards-vertical .consumable-card {
all: unset;
display: grid !important;
grid-template-rows: auto auto auto;
gap: 8px;
padding: 10px 12px 10px !important;
background: linear-gradient(180deg,
rgba(30, 40, 20, 0.55) 0%,
rgba(15, 22, 10, 0.70) 100%) !important;
border: 1px solid rgba(120,160,60,0.16) !important;
border-radius: 6px !important;
position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 rgba(180,220,100,0.04);
transition: border-color 0.15s, transform 0.15s;
box-sizing: border-box;
}
#garageScreen .consumable-cards-vertical .consumable-card:hover {
border-color: rgba(150,200,80,0.30) !important;
}
/* HEADER ROW: hotkey + name + count */
#garageScreen .consumable-cards-vertical .cc-head {
display: flex;
align-items: center;
gap: 8px;
}
#garageScreen .consumable-cards-vertical .cc-key {
/* перекрываем абсолютные позиции из старого CSS */
position: static !important;
transform: none !important;
top: auto !important; left: auto !important;
flex-shrink: 0;
width: 22px; height: 22px;
line-height: 22px;
text-align: center;
background: rgba(80,120,40,0.20);
border: 1px solid rgba(150,200,80,0.30);
color: #d8e8b0;
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 11px;
font-weight: 700;
border-radius: 4px;
padding: 0 !important;
}
#garageScreen .consumable-cards-vertical .cc-name {
flex: 1;
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 12.5px !important;
letter-spacing: 1.5px;
color: #e0eac0 !important;
text-align: left !important;
}
#garageScreen .consumable-cards-vertical .cc-count {
flex-shrink: 0;
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 13px !important;
color: #ffcc55 !important;
letter-spacing: 0.5px;
margin: 0 !important;
min-width: 28px;
text-align: right;
}
#garageScreen .consumable-cards-vertical .cc-count[data-zero="true"] {
color: rgba(180,180,180,0.45) !important;
}
/* ICON BOX — SVG в центре */
#garageScreen .consumable-cards-vertical .cc-icon-box {
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(ellipse at center,
rgba(80,110,45,0.18) 0%,
rgba(8,14,5,0) 70%);
border-radius: 4px;
}
#garageScreen .consumable-cards-vertical .cc-icon-box svg {
width: 44px;
height: 44px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
/* BUY BUTTON */
#garageScreen .consumable-cards-vertical .cc-buy {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
height: 32px;
display: flex !important;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(180deg,
rgba(80,130,38,0.85) 0%,
rgba(55,95,22,0.92) 100%) !important;
border: 1px solid rgba(140,200,60,0.55) !important;
border-radius: 4px !important;
color: #ffffff !important;
font-family: 'Black Ops One', 'Impact', sans-serif !important;
font-size: 11.5px !important;
letter-spacing: 1px !important;
cursor: pointer;
transition: all 0.12s !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(180,220,100,0.25);
}
#garageScreen .consumable-cards-vertical .cc-buy:hover:not(:disabled) {
background: linear-gradient(180deg,
rgba(100,160,50,0.95) 0%,
rgba(70,120,30,1) 100%) !important;
transform: translateY(-1px);
}
#garageScreen .consumable-cards-vertical .cc-buy:disabled {
background: rgba(40,55,25,0.55) !important;
border-color: rgba(120,150,80,0.25) !important;
color: rgba(200,200,200,0.5) !important;
cursor: default;
box-shadow: none;
}
#garageScreen .consumable-cards-vertical .cc-buy-plus {
color: #ffffff;
font-weight: 800;
}
#garageScreen .consumable-cards-vertical .cc-buy-cost {
color: #ffe6a0;
display: inline-flex;
align-items: center;
gap: 3px;
}
#garageScreen .consumable-cards-vertical .cc-buy-cost .cc-cry {
color: #c084ff;
font-size: 12px;
}
/* ─── v9.5 — компактные карточки припасов (без скролла) ─── */
/* Сами карточки — две строки: основная info + кнопка */
#garageScreen .consumable-cards-vertical .consumable-card {
grid-template-rows: auto auto !important;
gap: 6px !important;
padding: 8px 10px !important;
}
/* Скрываем старый отдельный icon-box (теперь иконка живёт в .cc-row) */
#garageScreen .consumable-cards-vertical .cc-head { display: none !important; }
/* Основная строка: key + icon + name + count в один ряд */
#garageScreen .consumable-cards-vertical .cc-row {
display: flex;
align-items: center;
gap: 8px;
}
#garageScreen .consumable-cards-vertical .cc-row .cc-key {
flex-shrink: 0;
width: 20px; height: 20px;
line-height: 20px;
text-align: center;
background: rgba(80,120,40,0.20);
border: 1px solid rgba(150,200,80,0.30);
color: #d8e8b0;
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 10.5px;
font-weight: 700;
border-radius: 3px;
padding: 0 !important;
position: static !important;
transform: none !important;
}
#garageScreen .consumable-cards-vertical .cc-row .cc-icon-box {
width: 28px; height: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(ellipse at center, rgba(80,110,45,0.20) 0%, rgba(8,14,5,0) 75%);
border-radius: 4px;
}
#garageScreen .consumable-cards-vertical .cc-row .cc-icon-box svg {
width: 24px; height: 24px;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
#garageScreen .consumable-cards-vertical .cc-row .cc-name {
flex: 1;
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 11.5px !important;
letter-spacing: 1px;
color: #e0eac0 !important;
text-align: left !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#garageScreen .consumable-cards-vertical .cc-row .cc-count {
flex-shrink: 0;
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 12px !important;
color: #ffcc55 !important;
margin: 0 !important;
min-width: 26px;
text-align: right;
position: static !important;
transform: none !important;
}
#garageScreen .consumable-cards-vertical .cc-row .cc-count[data-zero="true"] {
color: rgba(180,180,180,0.4) !important;
}
/* Кнопка покупки — компактнее */
#garageScreen .consumable-cards-vertical .cc-buy {
height: 28px !important;
font-size: 11px !important;
gap: 8px;
}
/* Контейнер припасов: помещаемся без скролла, gaps меньше */
#garageScreen .consumable-cards-vertical {
gap: 6px !important;
padding: 10px 12px !important;
overflow-y: hidden !important;
}
/* ─── XP-шкала в бою: серый трек, чтоб не сливался ни с чёрным, ни с прозрачным ─── */
/* В бою XP-шкала такая же как в меню (#0e1408 трек + olive border),
только с прозрачностью чтобы не перекрывала рендер боя. */
body.in-battle #globalTopbar > .topbar-xpbar {
display: flex !important;
background: rgba(14, 20, 8, 0.55) !important;
border: 1px solid rgba(120, 160, 60, 0.18) !important;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
/* Заполненная часть остаётся как есть (градиент XP-fill) */
/* ─── Force-password-change modal ─── */
#forcePwdModal {
position: fixed; inset: 0; z-index: 10000;
display: flex; align-items: center; justify-content: center;
}
#forcePwdModal .fpm-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
#forcePwdModal .fpm-card {
position: relative;
width: 360px;
max-width: 90vw;
background: linear-gradient(180deg, rgba(28,38,22,0.98) 0%, rgba(17,24,12,1) 100%);
border: 1px solid rgba(120,160,60,0.30);
border-radius: 8px;
padding: 24px 26px 22px;
box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
#forcePwdModal .fpm-title {
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 18px;
letter-spacing: 3px;
color: #e6f0c8;
text-align: center;
margin-bottom: 8px;
}
#forcePwdModal .fpm-sub {
font-size: 12px;
color: rgba(168,194,128,0.75);
line-height: 1.45;
margin-bottom: 16px;
text-align: center;
}
#forcePwdModal .fpm-input {
display: block;
width: 100%;
height: 38px;
padding: 0 12px;
margin-bottom: 10px;
background: rgba(8,12,5,0.6);
border: 1px solid rgba(120,160,60,0.30);
border-radius: 4px;
color: #e6f0c8;
font-size: 13px;
box-sizing: border-box;
outline: none;
transition: border-color 0.15s;
}
#forcePwdModal .fpm-input:focus {
border-color: rgba(180,220,100,0.55);
}
#forcePwdModal .fpm-error {
color: #ee7755;
font-size: 11.5px;
min-height: 16px;
margin: 4px 0 8px;
text-align: center;
}
#forcePwdModal .fpm-submit {
width: 100%;
height: 40px;
background: linear-gradient(180deg, rgba(80,140,40,0.85), rgba(60,110,30,0.9));
border: 1px solid rgba(140,200,60,0.6);
border-radius: 4px;
color: #ffffff;
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 13px;
letter-spacing: 2px;
cursor: pointer;
transition: all 0.15s;
box-shadow: 0 2px 10px rgba(80,140,40,0.4), inset 0 1px 0 rgba(180,220,100,0.3);
}
#forcePwdModal .fpm-submit:hover:not(:disabled) {
background: linear-gradient(180deg, rgba(100,160,50,0.95), rgba(75,130,35,1));
transform: translateY(-1px);
}
#forcePwdModal .fpm-submit:disabled { opacity: 0.6; cursor: default; }
/* Зал славы — экран начинается ПОД топбаром (top:topbar-h),
а не с padding-top. Так sticky-header прилипает к самому верху
экрана = впритык к нижней кромке топбара, без зазора. */
body:not(.topbar-hidden) #globalLeaderboardScreen.glb-screen {
top: var(--topbar-h) !important;
height: calc(100% - var(--topbar-h)) !important;
padding-top: 0 !important;
}
body:not(.topbar-hidden) #globalLeaderboardScreen.glb-screen .glb-header {
top: 0 !important;
}
/* Зал славы — подложка глобальной шапки (палитра меню/ангара).
Используем body-class screen-globalLeaderboardScreen (стабильнее :has). */
body.screen-globalLeaderboardScreen #globalTopbar {
background: linear-gradient(180deg,
rgba(25, 34, 19, 0.94) 0%,
rgba(17, 24, 12, 0.98) 100%) !important;
border-bottom: 1px solid rgba(120, 160, 60, 0.22) !important;
box-shadow: 0 2px 18px rgba(0,0,0,0.35) !important;
}
/* Зал славы — собственный sticky-заголовок получает свою подложку
и тонкую разделительную линию снизу, чтобы читался как отдельный
слой под глобальной шапкой, а не сливался с фоном экрана */
#globalLeaderboardScreen.glb-screen .glb-header {
background: linear-gradient(180deg,
rgba(25, 34, 19, 0.85) 0%,
rgba(17, 24, 12, 0.92) 100%);
border-bottom: 1px solid rgba(120, 160, 60, 0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
/* ════════════════════════════════════════════════════════════════
▼ ЗАЛ СЛАВЫ — интегрированный вид (как меню/ангар) ▼
• Палитра rgba(25,34,19) → (17,24,12) — единая с меню
• Никаких card-look рамок/теней на таблице — flat surface
• Кнопка В МЕНЮ — оливковая с акцентной полосой слева, как в ангаре
• Заголовок остаётся gold (это hero-элемент)
════════════════════════════════════════════════════════════════ */
#globalLeaderboardScreen.glb-screen {
background:
radial-gradient(ellipse at top, rgba(50, 70, 30, 0.18), transparent 65%),
linear-gradient(180deg, rgba(25, 34, 19, 0.92) 0%, rgba(17, 24, 12, 0.96) 100%) !important;
}
/* === ШАПКА: интегрирована в общую полосу под топбаром === */
#globalLeaderboardScreen .glb-header {
height: 64px;
padding: 0 24px;
background: transparent !important;
border-bottom: 1px solid rgba(120, 160, 60, 0.18);
box-shadow: none !important;
}
/* === КНОПКА В МЕНЮ (как в ангаре) === */
#globalLeaderboardScreen .glb-back {
appearance: none;
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 18px 0 14px;
background: linear-gradient(180deg,
rgba(80,120,40,0.55) 0%,
rgba(60,95,28,0.70) 100%) !important;
border: 1px solid rgba(150,200,80,0.45) !important;
border-left: 3px solid #b4dc64 !important;
border-radius: 4px;
color: #e6f0c8 !important;
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 12px;
letter-spacing: 2.5px;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(180,220,100,0.18);
text-transform: none;
}
#globalLeaderboardScreen .glb-back:hover {
background: linear-gradient(180deg,
rgba(100,150,50,0.7) 0%,
rgba(75,120,35,0.85) 100%) !important;
border-color: rgba(180,220,100,0.65) !important;
color: #ffffff !important;
transform: translateX(-2px);
box-shadow: 0 3px 12px rgba(80,140,40,0.35), inset 0 1px 0 rgba(180,220,100,0.25);
}
/* === TITLE BLOCK (центр) — оставляем gold-акцент, чуть умереннее === */
#globalLeaderboardScreen .glb-eyebrow {
color: rgba(168, 194, 128, 0.70);
letter-spacing: 3px;
font-size: 9.5px;
}
#globalLeaderboardScreen .glb-title {
font-size: 22px;
letter-spacing: 6px;
text-shadow: 0 0 18px rgba(232,212,128,0.20);
}
/* === META (всего игроков + refresh) === */
#globalLeaderboardScreen .glb-meta-num {
font-size: 18px;
color: #d8e8b8;
letter-spacing: 0.5px;
}
#globalLeaderboardScreen .glb-meta-lbl {
color: rgba(168, 194, 128, 0.55);
letter-spacing: 1.5px;
font-size: 8.5px;
margin-top: 2px;
}
#globalLeaderboardScreen .glb-refresh {
background: transparent !important;
border: 1px solid rgba(120, 160, 60, 0.25) !important;
color: rgba(168, 194, 128, 0.7) !important;
width: 32px; height: 32px;
border-radius: 4px;
font-size: 16px;
transition: all 0.15s !important;
}
#globalLeaderboardScreen .glb-refresh:hover {
background: rgba(80, 120, 40, 0.18) !important;
border-color: rgba(150, 200, 80, 0.45) !important;
color: #e6f0c8 !important;
transform: rotate(60deg);
}
/* === ТАБЛИЦА: flat surface, без card-look === */
#globalLeaderboardScreen .glb-table-wrap {
padding: 18px 24px 32px;
background: transparent !important;
}
#globalLeaderboardScreen .glb-table-title {
color: rgba(168, 194, 128, 0.65);
letter-spacing: 3px;
font-size: 9.5px;
padding: 4px 0 14px;
text-align: left;
}
#globalLeaderboardScreen .glb-table {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible;
}
#globalLeaderboardScreen .glb-table thead th {
background: transparent !important;
color: #d8b860 !important;
border-bottom: 1px solid rgba(216, 184, 96, 0.30) !important;
padding: 10px 12px;
letter-spacing: 2.5px;
font-size: 9.5px;
text-shadow: 0 0 8px rgba(216, 184, 96, 0.20);
}
#globalLeaderboardScreen .glb-table tbody td {
border-bottom: 1px solid rgba(120, 160, 60, 0.08);
padding: 10px 12px;
color: #cfdbb0;
}
#globalLeaderboardScreen .glb-table tbody tr:hover td {
background: rgba(80, 120, 40, 0.10) !important;
}
#globalLeaderboardScreen .glb-row-name { color: #e6f0c8; }
#globalLeaderboardScreen .glb-row-uid {
color: rgba(168, 194, 128, 0.5);
font-family: 'Courier New', monospace;
}
/* Подсветка собственной строки */
#globalLeaderboardScreen .glb-row-me td {
background: rgba(80, 120, 40, 0.18) !important;
border-bottom-color: rgba(180, 220, 100, 0.30) !important;
}
/* Top-3 бейджи приглушаем — gold всё ещё читается, но не кричит */
#globalLeaderboardScreen .glb-row-rank-1 { color: #ffd966; text-shadow: 0 0 8px rgba(255,217,102,0.35); }
#globalLeaderboardScreen .glb-row-rank-2 { color: #cfd6dc; }
#globalLeaderboardScreen .glb-row-rank-3 { color: #cd8a4a; }
/* Кнопка ВЕРНУТЬСЯ В БОЙ — рядом с В МЕНЮ когда ангар открыт из боя */
#garageScreen .hangar-preview-header {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
#garageScreen .hangar-return-btn {
background: linear-gradient(180deg,
rgba(180,140,40,0.55) 0%,
rgba(140,100,20,0.70) 100%) !important;
border-color: rgba(220,180,80,0.55) !important;
border-left: 3px solid #ffcc44 !important;
color: #fff8d8 !important;
}
#garageScreen .hangar-return-btn:hover {
background: linear-gradient(180deg,
rgba(210,160,55,0.7) 0%,
rgba(160,115,25,0.85) 100%) !important;
border-color: rgba(240,200,100,0.65) !important;
color: #ffffff !important;
transform: translateX(2px);
}
#garageScreen .hangar-return-btn:hover .hangar-back-arrow {
transform: translateX(3px);
}
/* (Удалено правило body.in-duel { display:none } — оно ломало
капсулы топбара после выхода из дуэли в меню. Топбар в бою уже
полностью скрыт через body.in-battle #globalTopbar { display:none }
поэтому duel-специфичное правило избыточно.) */
/* В бою — глобальный топбар УДАЛЁН целиком (display:none).
Битва занимает весь экран без любых HUD-капсул сверху.
В дуэли in-duel применяется одновременно с in-battle, но display:none
на самом топбаре уже всё перекрывает — duel-специфичные правила
(выше) безопасны как noop. */
body.in-battle #globalTopbar {
display: none !important;
}
/* XP-шкала: спокойный олива-градиент в стиле HUD. Без горчицы,
без кислотного зелёного. Лёгкие inset-блики сверху/снизу для
объёма «полированного металла». */
#globalTopbar .topbar-xpbar-fill {
background: linear-gradient(180deg,
rgba(140, 165, 96, 0.92) 0%,
rgba(90, 115, 56, 0.94) 100%) !important;
box-shadow:
inset 0 1px 0 rgba(220, 235, 180, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.28) !important;
}
/* Badge: уважать HTML hidden атрибут (раньше display:flex его перекрывал
и пустая красная плашка с "0" висела всегда над кнопкой заданий). */
.topbar-btn-badge[hidden] { display: none !important; }
/* Missions popup — теперь position:fixed, координаты ставятся из JS
на основе rect самой кнопки. CSS-якорь 'left:18px' убран — он
тянул popup в левый край экрана. */
#missionsPopup.missions-popup {
position: fixed !important;
left: auto;
top: auto;
}
/* Loading mark — favicon вместо ASCII-square. */
.loading-logo .loading-mark-img {
width: 96px; height: 96px;
display: block;
margin: 0 auto 12px;
image-rendering: -webkit-optimize-contrast;
filter: drop-shadow(0 4px 14px rgba(140, 200, 80, 0.30));
animation: loadingPulse 2s ease-in-out infinite;
}
/* Battle-loading использует тот же loading-overlay template
что initial loading. military-bg как fallback фон. */
.loading-overlay {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
background-color: #1e2a18;
background-image:
radial-gradient(ellipse at top, rgba(50, 70, 30, 0.18), transparent 65%),
linear-gradient(180deg, rgba(25, 34, 19, 0.96) 0%, rgba(17, 24, 12, 0.99) 100%);
}
.loading-overlay .loading-mark-img {
width: 80px; height: 80px;
}
.loading-overlay .loading-title {
font-size: 36px;
letter-spacing: 6px;
}
/* ════════════════════════════════════════════════════════════════
MENU STENCIL OVERRIDES — превращает существующие блоки главного
меню в военно-стенсильный игровой стиль (как новые настройки):
• clip-path corner-cuts на панелях/кнопках вместо round-corners
• diagonal hatch overlay для глубины и тактичной "грязности"
• stencil-style "// ЗАГОЛОВОК" — узкая золотая skewed-полоса слева
• angular прямоугольные slider thumbs, dropdown'ы
Не трогает: HUD, leaderboard table, modals не-meню (rank/daily-reward).
════════════════════════════════════════════════════════════════ */
/* ── Topbar — diagonal hatch overlay + угловатые capsule'ы ── */
.menu-topbar {
background: linear-gradient(180deg, rgba(35,48,22,0.78), rgba(20,30,15,0.72));
border-bottom: 1px solid rgba(120,160,70,0.30);
position: relative;
}
/* (Удалена золотая декор-полоса по нижней кромке топбара — она
проходила под креприпавами/кнопками шапки и над превью карты.
Пользователь попросил убрать.) */
/* Topbar capsules — sharp rectangles 2px без clip-path (не клипуем все
подряд — слишком одинаково смотрится). Угловатость через tight border
+ военный grunge gradient. */
.topbar-btn,
.settings-gear-btn,
.crystals-display,
.topbar-callsign,
.topbar-xpbar,
.topbar-rank-emblem {
border-radius: 2px !important;
}
/* rankIcon мигрировал canvas→![]()
(PNG-эмблема). Старые правила центровки
в style.5 таргетили `& canvas` — для ![]()
их не было, и иконка 52×60
висела inline в 44×44 контейнере, прижимаясь к baseline → съезжала вниз
относительно ника. Центрируем абсолютом ровно как раньше канвас (контейнер
уже position:relative). */
.topbar-rank-emblem > #rankIcon {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 52px; height: 60px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.topbar-rank-emblem:hover > #rankIcon {
filter: drop-shadow(0 0 8px rgba(255,210,138,0.5))
drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
/* (Удалена фиолетовая bottom-strip у crystals capsule — было слишком
шумно. Кристаллы остаются с дефолтной фиолетовой границей.) */
/* ── Menu panels — clip-path + stencil hatch ── */
.menu-panel {
background: rgba(18,28,14,0.78);
border: 1px solid rgba(120,160,70,0.38);
border-radius: 4px;
clip-path: polygon(
0 0, calc(100% - 12px) 0, 100% 12px,
100% 100%, 12px 100%, 0 calc(100% - 12px)
);
position: relative;
}
/* Panel headers — чистый центрированный заголовок без accent'ов
снизу (tape-strip убран — он визуально лежал над превью карты). */
.menu-panel h3 {
text-align: center;
color: #c8b560;
text-transform: uppercase;
padding-left: 0;
border-bottom: 1px solid rgba(180,140,40,0.20);
}
.menu-panel h3::before { content: none; }
.menu-panel h3::after { content: none; }
/* Side blocks — без accent'ов, просто чистый заголовок с золотым
bottom-border'ом (без //, без точек). */
.side-block-header {
padding-left: 0;
padding-bottom: 8px;
border-bottom: 1px solid rgba(180,140,40,0.18);
margin-bottom: 8px;
}
.side-block-header::before { content: none; }
.side-block-header::after { content: none; }
.side-block-title {
letter-spacing: 1.5px;
}
/* ── Buttons — angular military stencil ── */
.btn,
.btn-primary,
.btn-accent,
.btn-spectate,
.btn-editor,
.btn-full {
border-radius: 2px !important;
clip-path: polygon(
6px 0, 100% 0, 100% calc(100% - 6px),
calc(100% - 6px) 100%, 0 100%, 0 6px
);
text-transform: uppercase;
letter-spacing: 2px;
}
/* ── Dropdowns (custom-select) — sharp rect, без декор-полосок ── */
.cs-trigger {
border-radius: 2px !important;
}
.cs-panel {
border-radius: 2px !important;
}
.cs-option {
border-radius: 1px !important;
}
/* ── Battle list — sharp rect, без угловых рамок ──
Лёгкая 45° hatch штриховка для текстуры, обычный border. */
.battle-list {
border-radius: 2px !important;
background: rgba(10,15,8,0.65);
border-color: rgba(120,160,70,0.25);
}
.battle-item {
border-bottom-color: rgba(180,140,40,0.15);
}
/* ── Mode label (label captions in battle settings) — stencil accent ── */
.mode-label {
color: #b8a050 !important;
letter-spacing: 2px !important;
}
/* ── Bot count control — без подложки и без dashed border'а.
Просто плоский inline-блок. Тумблер внутри использует общий
.toggle-switch class — уже square military style. ── */
.bot-count-control {
background: transparent;
border: none;
border-radius: 0;
}
.bot-count-btn {
border-radius: 2px !important;
}
/* ── XP bar в топбаре — золотой fill, stencil track ── */
.topbar-xpbar-track {
background: rgba(15,22,10,0.85) !important;
border: 1px solid rgba(120,160,70,0.30) !important;
}
.topbar-xpbar-fill {
background: linear-gradient(90deg, rgba(180,140,40,0.85), rgba(232,184,96,0.95)) !important;
}
.topbar-xp-rank {
color: #c8b560 !important;
}
/* (Удалены corner brackets у hangar-side — пользователь попросил
убрать угловатые рамки. Hangar-side остаётся с обычным border'ом
из своего основного правила.) */
/* ── Custom checkbox toggle-switch уже в нужном стиле, не трогаем ── */
/* ════════════════════════════════════════════════════════════════
ПРИКАЗЫ (missions) — стиль «военный приказ»: штамп-номер, стенсил,
тактический прогресс-бар, печать-награда. Перебивает базовые
.mission-* из style.4-battle.css (этот файл грузится последним).
════════════════════════════════════════════════════════════════ */
#missionsPopup.missions-popup {
width: 344px;
padding: 0;
max-height: none;
overflow: visible;
background: linear-gradient(180deg, rgba(30,36,18,0.98), rgba(15,19,9,0.98));
border: 1px solid rgba(150,170,80,0.45);
border-radius: 3px;
box-shadow: 0 12px 30px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 0 14px rgba(0,0,0,0.5);
}
.missions-popup .missions-popup-head {
display: flex; align-items: center; justify-content: space-between;
padding: 9px 12px; margin: 0;
background: linear-gradient(180deg, rgba(58,50,18,0.6), rgba(30,34,16,0.3));
border-bottom: 1px solid rgba(180,140,40,0.35);
position: relative;
}
.missions-popup .missions-popup-head::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
background: repeating-linear-gradient(90deg, #caa23c 0 8px, #1a1a0e 8px 14px);
opacity: 0.5;
}
.missions-popup .mph-title {
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 14px; letter-spacing: 2px; color: #e8c766;
text-shadow: 0 1px 2px #000; display: flex; align-items: center; gap: 7px;
}
.missions-popup .mph-title .ic { font-size: 13px; opacity: 0.8; }
.missions-popup .side-refresh-hint { font-size: 10px; color: #8a9a5a; letter-spacing: 0.3px; }
.missions-popup .missions-list {
display: flex; flex-direction: column; gap: 8px;
padding: 11px; margin: 0;
max-height: min(60vh, 440px); overflow-y: auto;
}
.missions-popup .mission-row {
position: relative;
background: linear-gradient(160deg, rgba(36,42,22,0.92), rgba(20,24,12,0.94));
border: 1px solid rgba(150,170,80,0.20);
border-left: 3px solid #caa23c;
border-radius: 2px;
padding: 9px 12px 8px 13px;
overflow: hidden;
}
.missions-popup .mission-row::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 7px);
}
.missions-popup .mission-row.mission-done { border-left-color: #7ec850; opacity: 1; }
.missions-popup .mission-row.mission-claimed { opacity: 0.5; border-left-color: #5a6a3a; filter: saturate(0.6); }
.missions-popup .mission-tag {
position: absolute; top: 7px; right: 10px;
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 8.5px; letter-spacing: 1.5px; color: rgba(210,180,90,0.5);
}
.missions-popup .mission-label {
font-size: 12.5px; font-weight: 600; color: #dcd6c0;
letter-spacing: 0.2px; margin-bottom: 8px; padding-right: 64px; line-height: 1.3;
}
.missions-popup .mission-progress-bar {
height: 7px; background: rgba(0,0,0,0.4);
border: 1px solid rgba(0,0,0,0.5); border-radius: 1px;
overflow: hidden; margin-bottom: 7px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.missions-popup .mission-progress-fill {
height: 100%;
background: repeating-linear-gradient(90deg, #caa23c 0 5px, #9a7a26 5px 7px);
box-shadow: 0 0 6px rgba(202,162,60,0.4); transition: width 0.3s;
}
.missions-popup .mission-done .mission-progress-fill {
background: repeating-linear-gradient(90deg, #7ec850 0 5px, #5a9a30 5px 7px);
}
.missions-popup .mission-footer { display: flex; align-items: center; gap: 9px; font-size: 11.5px; }
.missions-popup .mission-count {
color: #9aa57a; flex: 1; font-weight: 600; letter-spacing: 0.5px;
font-variant-numeric: tabular-nums;
}
.missions-popup .mission-reward { color: #e8c766; font-weight: 700; }
.missions-popup .mission-done-stamp {
color: #7ec850; font-weight: 700; font-size: 10.5px; letter-spacing: 1px;
border: 1.5px solid #7ec850; padding: 1px 6px; border-radius: 2px;
transform: rotate(-4deg); opacity: 0.85;
}
.missions-popup .mission-claim-btn {
font-family: 'Black Ops One', 'Impact', sans-serif;
padding: 3px 12px; font-size: 11px; letter-spacing: 1px;
background: linear-gradient(180deg, rgba(202,162,60,0.25), rgba(140,100,30,0.2));
border: 1px solid #caa23c; color: #f0d488; cursor: pointer;
border-radius: 2px; text-shadow: 0 1px 1px #000;
}
.missions-popup .mission-claim-btn:hover { background: rgba(202,162,60,0.4); }
/* ════════════════════════════════════════════════════════════════
Настройки дуэли — кнопка + модалка с чипами пула корпусов/башен.
════════════════════════════════════════════════════════════════ */
.duel-settings-btn {
width: 100%; margin-top: 8px; padding: 9px 12px;
background: linear-gradient(180deg, rgba(58,50,18,0.5), rgba(30,34,16,0.4));
border: 1px solid rgba(180,140,40,0.4); border-radius: 3px;
color: #e8c766; cursor: pointer;
/* В тон остальным контролам лобби: военный шрифт + капс + трекинг.
Раньше наследовался body-шрифт mixed-case — выбивался из дизайна. */
font-family: 'Black Ops One', 'Impact', sans-serif;
text-transform: uppercase;
font-size: 11px; letter-spacing: 2px;
text-shadow: 0 0 10px rgba(232,160,64,0.25);
transition: background 0.2s, border-color 0.2s;
}
.duel-settings-btn:hover {
background: rgba(202,162,60,0.22);
border-color: rgba(232,160,64,0.6);
}
#duelSettingsModal { align-items: center; justify-content: center; }
.ds-wrap {
width: 420px; max-width: 92vw; padding: 18px 20px;
background: linear-gradient(180deg, rgba(30,36,18,0.99), rgba(15,19,9,0.99));
border: 1px solid rgba(180,140,40,0.5); border-radius: 4px;
box-shadow: 0 16px 40px rgba(0,0,0,0.7);
}
.ds-title {
font-family: 'Black Ops One', 'Impact', sans-serif;
font-size: 18px; letter-spacing: 2px; color: #e8c766; margin: 0 0 14px;
text-align: center; text-shadow: 0 1px 2px #000;
}
.ds-section { margin-bottom: 14px; }
.ds-section-title { font-size: 11px; letter-spacing: 1px; color: #8a9a5a; margin-bottom: 7px; }
.ds-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ds-chip {
padding: 6px 12px; border-radius: 3px; cursor: pointer; font-size: 12.5px;
background: rgba(0,0,0,0.35); border: 1px solid rgba(120,130,90,0.3);
color: #6a6a5a; text-decoration: line-through; transition: all 0.12s;
}
.ds-chip.on {
background: rgba(120,180,60,0.18); border-color: rgba(120,180,60,0.6);
color: #cfe0a8; text-decoration: none;
}
.ds-chip:hover { border-color: rgba(220,200,120,0.7); }
.ds-toggle-row {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 2px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.08);
font-size: 13px; color: #d8d2bc;
}
.ds-hint { font-size: 10.5px; color: #777; line-height: 1.4; margin: 6px 0 14px; }
/* ════════════════════════════════════════════════════════════════
END stencil overrides
════════════════════════════════════════════════════════════════ */