/* ── Top Bar ── */
.menu-topbar {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: rgba(20,30,15,0.6);
    border-bottom: 1px solid rgba(100,130,60,0.25);
    gap: 16px;
    flex-shrink: 0;
}
.topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.topbar-left label {
    font-size: 10px;
    color: #7a9a5a;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    white-space: nowrap;
}
.topbar-left input {
    padding: 6px 12px;
    background: rgba(15,22,10,0.7);
    border: 1px solid rgba(100,140,60,0.3);
    border-radius: 8px;
    color: #e0d8c0;
    font-size: 15px;
    outline: none;
    width: 180px;
    transition: all 0.3s;
}
.topbar-left input:focus {
    border-color: rgba(120,180,60,0.55);
    box-shadow: 0 0 12px rgba(100,160,40,0.2);
    background: rgba(15,22,10,0.85);
}

.topbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
}
.rank-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 16px;
    background: rgba(15,22,10,0.6);
    border: 1px solid rgba(100,140,60,0.3);
    border-radius: 10px;
}
#rankIcon {
    border-radius: 4px;
}
.rank-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
}
.rank-name {
    font-family: 'Black Ops One', 'Impact', sans-serif;
    font-size: 14px;
    color: #e8cc60;
    letter-spacing: 2px;
}
.rank-bar-track {
    height: 6px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(100,140,60,0.2);
    border-radius: 3px;
    overflow: hidden;
}
.rank-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8abb48, #a8dd58);
    border-radius: 3px;
    transition: width 0.4s;
}
.rank-xp {
    font-size: 9px;
    color: #6a8a4a;
    letter-spacing: 1px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.crystals-display {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(80,40,120,0.25);
    border: 1px solid rgba(170,85,238,0.35);
    border-radius: 10px;
}
.crystals-display span {
    font-size: 16px;
    font-weight: 700;
    color: #cc88ff;
}

/* ── Two Column Layout ── */
.menu-columns {
    display: flex;
    flex: 1;
    gap: 10px;
    padding: 10px 12px;
    overflow: hidden;
    min-height: 0;
}

.menu-panel {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    overflow-y: auto;
    background: rgba(18,28,14,0.65);
    border: 1px solid rgba(100,140,60,0.25);
    border-radius: 12px;
}
.menu-panel h3 {
    font-family: 'Black Ops One', 'Impact', sans-serif;
    font-size: 16px;
    letter-spacing: 4px;
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(100,140,60,0.2);
    color: #c8b560;
    flex-shrink: 0;
}
.menu-panel h4 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 6px;
    font-weight: 700;
    color: #7a9a5a;
}

/* ── Settings Gear Button (in topbar) ── */
.settings-gear-btn {
    background: rgba(40,70,100,0.3);
    border: 1px solid rgba(100,160,220,0.35);
    border-radius: 8px;
    color: #88bbdd;
    font-size: 20px;
    width: 38px;
    height: 38px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-left: 10px;
    padding: 0;
    line-height: 1;
}
.settings-gear-btn:hover {
    background: rgba(100,160,220,0.18);
    border-color: rgba(100,160,220,0.5);
    color: #aaddff;
    transform: rotate(30deg);
}

/* ── Settings Modal ── */
.settings-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(5,8,3,0.85);
    z-index: 50;
    display: flex !important;
    align-items: center;
    justify-content: center;
    /* Без backdrop-filter: blur — он рантайм-блюрил всю страницу под модалом,
       и каждый hover/click внутри модала заставлял compositor пересчитывать
       blur+clip-path на весь viewport. На slow CPU юзер видел «3 fps». */
}
.settings-modal-overlay[style*="display:none"],
.settings-modal-overlay[style*="display: none"] {
    display: none !important;
}
.settings-modal-box {
    background: linear-gradient(160deg, #141a10, #0e120a);
    border: 1px solid rgba(100,160,220,0.25);
    border-radius: 16px;
    padding: 0;
    min-width: 340px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 30px rgba(100,160,220,0.05);
}
/* Tabbed variant — wider, with vertical sidebar */
.settings-modal-box--tabbed {
    max-width: 720px;
    min-width: 560px;
}
.settings-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.settings-modal-header h3 {
    font-family: 'Black Ops One', 'Impact', sans-serif;
    font-size: 15px;
    letter-spacing: 3px;
    color: #60a8e8;
    margin: 0;
    padding: 0;
    border: none;
}
.settings-close-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: #6a8a9a;
    font-size: 13px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
}
.settings-close-btn:hover {
    background: rgba(200,50,50,0.15);
    border-color: rgba(200,50,50,0.3);
    color: #ee6666;
}
.settings-modal-body {
    padding: 14px 18px 18px;
}

/* ── Settings rows (shared between modal and pause) ── */
.setting-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    font-size: 12px;
    color: #90b0cc;
}
.setting-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.setting-row input[type="range"] {
    flex: 1;
    min-width: 60px;
    accent-color: #4a88cc;
}
.setting-row input[type="checkbox"] {
    accent-color: #4a88cc;
    width: 14px;
    height: 14px;
}
.setting-row span {
    font-size: 11px;
    color: #5a7a9a;
    min-width: 32px;
}
.settings-controls {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.control-hint {
    font-size: 11px;
    color: #5a7a7a;
    margin: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* ════════════════════════════════════════════════════════════════
   НАСТРОЙКИ — military/khaki стилистика как в главном меню.
   Используется в #settingsModal (главное меню) и #pauseMenu (в бою).

   Палитра — olive + warm gold accent, без cyan/blue. Match'ит:
     • main menu panels (rgba(18,28,14,0.65) bg, олив border)
     • menu h3 заголовки (#c8b560 gold)
     • cs-trigger / dropdowns (warm orange-gold #e8a040 accent)
     • military-bg diagonal hatch overlay для глубины

   "Integrated, not card-like" — секции БЕЗ собственного бордера,
   разделены только тонкими divider'ами. Угловатость через малый
   border-radius (4-6px) + clip-path corner-cuts на табах и кнопках.
   ════════════════════════════════════════════════════════════════ */

/* Modal overlay получает diagonal hatch (как military-bg) — модал
   становится тематической продлёнкой меню, а не плашкой поверх. */
.settings-modal-overlay {
    background:
        radial-gradient(ellipse at center, rgba(20,30,15,0.55) 30%, rgba(0,0,0,0.85) 100%) !important;
}

/* Modal box — то же что menu-panel, чуть толще border */
.settings-modal-box,
.settings-modal-box--tabbed {
    background: rgba(20,30,15,0.85);
    border: 1px solid rgba(120,160,70,0.35);
    border-radius: 4px;
    box-shadow:
        0 12px 50px rgba(0,0,0,0.8),
        0 0 30px rgba(100,130,60,0.12),
        inset 0 1px 0 rgba(255,255,255,0.04);
    /* Слегка скошенные углы через clip-path — диагональ 8px по 2 углам
       даёт «военный стенсил» вид без полного flat-rectangle. */
    clip-path: polygon(
        0 0, calc(100% - 14px) 0, 100% 14px,
        100% 100%, 14px 100%, 0 calc(100% - 14px)
    );
}
.settings-modal-box--tabbed {
    max-width: 760px;
    min-width: 600px;
}

/* Header в военном стиле — gold заголовок, hatch-divider */
.settings-modal-header {
    padding: 12px 18px 10px;
    border-bottom: 1px solid rgba(120,160,70,0.25);
    background: linear-gradient(180deg, rgba(50,70,30,0.18), transparent);
}
.settings-modal-header h3 {
    font-family: 'Black Ops One', 'Impact', sans-serif;
    font-size: 16px;
    letter-spacing: 4px;
    color: #c8b560;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.settings-close-btn {
    background: rgba(40,60,25,0.4);
    border: 1px solid rgba(120,160,70,0.3);
    border-radius: 3px;
    color: #a8b888;
}
.settings-close-btn:hover {
    background: rgba(180,40,40,0.25);
    border-color: rgba(220,80,80,0.5);
    color: #ee9090;
}

/* ── TABBED BODY ──
   Фиксированная высота независимо от содержимого активной вкладки.
   Иначе переключение Аудио↔Графика↔Управление дёргало размер модала
   под высоту панели — UX неприятный. Теперь body всегда 560px (или
   75vh на малых экранах), а если контент панели длиннее — внутри
   .settings-content включается вертикальный скролл (уже описан ниже). */
.settings-tabbed-body {
    display: grid;
    grid-template-columns: 170px 1fr;
    padding: 0;
    height: min(420px, 75vh);
    overflow: hidden;
}

/* Vertical tabs sidebar */
.settings-tabs {
    display: flex;
    flex-direction: column;
    padding: 16px 10px;
    gap: 2px;
    background: linear-gradient(180deg, rgba(30,42,22,0.45), rgba(20,28,14,0.25));
    border-right: 1px solid rgba(120,160,70,0.18);
}
.settings-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    border-radius: 0;
    color: #8aa078;
    font-family: 'Black Ops One', 'Impact', sans-serif;
    font-size: 12px;
    letter-spacing: 1.8px;
    cursor: pointer;
    text-align: left;
    /* Конкретные properties вместо `all`: браузер не отслеживает
       весь property-bag на каждом mouseenter, переключение быстрее. */
    transition: background 0.12s ease, color 0.12s ease, border-left-color 0.12s ease;
    position: relative;
}
.settings-tab:hover {
    color: #d0c890;
    background: rgba(100,130,55,0.10);
    border-left-color: rgba(180,160,80,0.4);
}
.settings-tab.is-active {
    color: #e8a040;
    background: rgba(120,80,25,0.18);
    border-left-color: #d8a040;
    box-shadow: inset 0 0 12px rgba(200,140,40,0.08);
}
.settings-tab.is-active::after {
    /* Стрелка-указатель справа — стилизованный военный pointer */
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #20281a;
}
.settings-tab-icon {
    font-size: 15px;
    width: 18px;
    text-align: center;
    opacity: 0.85;
}
.settings-tab-label { flex: 1; }

/* Content panels — БЕЗ карточек, просто секции с divider'ами.
   contain: paint — изолируем repaint scrollable области от родителя
   с clip-path:polygon. Без этого каждый кадр скролла рестрайл'ил
   ВСЁ окно настроек целиком (clip-path заставлял compositor
   перерасчитывать форму на каждом frame) → fps падал до ~20. */
.settings-content {
    padding: 20px 26px 22px;
    overflow-y: auto;
    contain: paint;
    will-change: scroll-position;
}
.settings-content::-webkit-scrollbar { width: 6px; }
.settings-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.25); }
.settings-content::-webkit-scrollbar-thumb {
    background: rgba(120,160,70,0.28);
    border-radius: 3px;
}
/* Без fade-in анимации — переключение вкладок должно быть мгновенным.
   200ms opacity+translateY на каждом клике ощущалось как «подлагивает». */
.settings-panel { display: none; }
.settings-panel.is-active { display: block; }

/* Секции без border'а — только заголовок-разделитель + ряд опций.
   Это даёт "integrated" вид а не "card-in-card". */
.settings-section {
    margin-bottom: 24px;
}
.settings-section:last-child { margin-bottom: 4px; }
.settings-section-title {
    font-family: 'Black Ops One', 'Impact', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    color: #b8a050;
    text-transform: uppercase;
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(180,140,40,0.20);
    position: relative;
}
/* (Удалены три точки справа от section-title — пользователь
   попросил убрать. Заголовок остаётся с золотым bottom-border'ом.) */

/* Универсальная row */
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(120,160,70,0.10);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #d8d0a8;
    font-weight: 500;
}
.settings-row-hint {
    font-size: 11px;
    color: #7a8a5a;
    font-weight: normal;
    line-height: 1.45;
    letter-spacing: 0.3px;
}

/* Slider — золотисто-оливковый, без круглого thumb'а */
.settings-row--slider .settings-slider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 240px;
    flex-shrink: 0;
}
.settings-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    background:
        linear-gradient(90deg, rgba(180,140,40,0.4) 0%, rgba(180,140,40,0.4) var(--slider-fill, 50%),
                              rgba(50,65,30,0.5) var(--slider-fill, 50%), rgba(50,65,30,0.5) 100%);
    border: 1px solid rgba(120,160,70,0.25);
    border-radius: 1px;
    outline: none;
}
.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 18px;
    background: linear-gradient(180deg, #e8b860, #b88420);
    border: 1px solid rgba(40,30,10,0.7);
    border-radius: 1px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    transition: transform 0.1s, box-shadow 0.1s;
}
.settings-slider::-webkit-slider-thumb:hover {
    transform: scaleY(1.1);
    box-shadow: 0 0 8px rgba(220,160,40,0.4), 0 1px 3px rgba(0,0,0,0.5);
}
.settings-slider::-moz-range-thumb {
    width: 14px;
    height: 18px;
    background: linear-gradient(180deg, #e8b860, #b88420);
    border: 1px solid rgba(40,30,10,0.7);
    border-radius: 1px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.settings-slider-value {
    font-family: 'Black Ops One', 'Impact', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    color: #e8a040;
    min-width: 44px;
    text-align: right;
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}

/* Toggle (iOS-style) — green checked accent matching menu */
.settings-row--toggle .toggle-switch { flex-shrink: 0; }

/* Кнопки — клиновидные, угловатые, не округлые */
.settings-btn {
    background: rgba(40,55,25,0.55);
    border: 1px solid rgba(120,160,70,0.35);
    color: #c0d098;
    font-family: 'Black Ops One', 'Impact', sans-serif;
    font-size: 11px;
    letter-spacing: 1.8px;
    padding: 9px 18px;
    border-radius: 2px;
    cursor: pointer;
    /* Конкретные properties вместо `all` (см. фикс settings-tab выше).
       На каждый hover браузер иначе диффает весь computed-style каждой
       кнопки — заметно лагает в модале где 8-12 кнопок и controls. */
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    clip-path: polygon(
        6px 0, 100% 0, 100% calc(100% - 6px),
        calc(100% - 6px) 100%, 0 100%, 0 6px
    );
}
.settings-btn:hover {
    background: rgba(60,80,30,0.7);
    border-color: rgba(160,200,90,0.55);
    color: #e0e0c0;
    text-shadow: 0 0 6px rgba(150,200,80,0.3);
}
.settings-btn--primary {
    background: linear-gradient(180deg, rgba(140,90,25,0.5), rgba(100,65,15,0.45));
    border-color: rgba(220,150,40,0.55);
    color: #f0c878;
}
.settings-btn--primary:hover {
    background: linear-gradient(180deg, rgba(170,110,30,0.7), rgba(130,80,18,0.6));
    border-color: rgba(240,170,50,0.75);
    color: #ffe098;
    box-shadow: 0 0 12px rgba(200,140,40,0.25);
}
.settings-btn--ghost {
    background: rgba(70,30,20,0.35);
    border-color: rgba(180,80,60,0.35);
    color: #d09080;
}
.settings-btn--ghost:hover {
    background: rgba(110,40,28,0.5);
    border-color: rgba(220,100,80,0.55);
    color: #e8a890;
}
.settings-btn--large {
    padding: 13px 26px;
    font-size: 13px;
    letter-spacing: 2.5px;
}
.settings-btn-group { display: flex; gap: 8px; }

/* Keys grid — кейкепы в стиле stencil */
.settings-keys-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
    margin-top: 4px;
}
.settings-key-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #b0c080;
}
.settings-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 4px 10px;
    background: linear-gradient(180deg, rgba(40,52,20,0.85), rgba(20,28,10,0.95));
    border: 1px solid rgba(180,140,40,0.35);
    border-radius: 2px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #d8b860;
    letter-spacing: 0.8px;
    box-shadow:
        inset 0 1px 0 rgba(255,220,150,0.08),
        0 1px 2px rgba(0,0,0,0.6);
}
.settings-key-desc { color: #aab890; }

/* Meta-info — stencil-style key:value */
.settings-meta { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.settings-meta-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(120,160,70,0.10);
}
.settings-meta-key { color: #7a8a5a; letter-spacing: 1px; text-transform: uppercase; font-size: 10px; }
.settings-meta-val { color: #c8b560; font-family: 'Courier New', monospace; font-size: 11px; }

/* ── Settings-modal battle footer ──
   В бою (ESC) тот же settingsModal используется как pause-overlay.
   Footer с кнопками "Выйти"/"Продолжить" показывается ТОЛЬКО когда
   body[data-settings-in-battle="1"]. В меню (без боя) — скрыт. */
.settings-modal-footer {
    display: none;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid rgba(120,160,70,0.25);
    background: linear-gradient(0deg, rgba(50,70,30,0.18), transparent);
}
body[data-settings-in-battle="1"] .settings-modal-footer {
    display: flex;
}

/* ════════════════════════════════════════════════════════════════
   END блока настроек
   ════════════════════════════════════════════════════════════════ */

/* === Старый legacy селектор control-hint .key — оставлен для не-
   мигрированных модалов === */
.control-hint .key {
    display: inline-block;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 9px;
    color: #6a9acc;
    font-weight: 700;
    letter-spacing: 1px;
    min-width: 50px;
    text-align: center;
}

/* ── Garage nav button in topbar ── */
.topbar-nav-btn {
    background: rgba(60,90,30,0.35);
    border: 1px solid rgba(120,180,60,0.4);
    border-radius: 8px;
    color: #a8cc70;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 6px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s;
    margin-left: 8px;
}
.topbar-nav-btn:hover {
    background: rgba(80,120,40,0.5);
    border-color: rgba(140,200,70,0.6);
    color: #c8e890;
    box-shadow: 0 0 12px rgba(100,180,40,0.15);
}

/* ── Left Panel: Side (Missions + Leaderboard) ── */
.panel-side {
    flex: 0 0 300px;
    min-width: 240px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    overflow: hidden;
}
.side-block {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.side-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(100,140,60,0.2);
    flex-shrink: 0;
}
.side-block-title {
    font-family: 'Black Ops One', 'Impact', sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    color: #c8b560;
}
.side-missions .side-block-title {
    color: #88cc66;
}
.side-leaderboard .side-block-title {
    color: #e8c840;
}
.side-refresh-hint {
    font-size: 10px;
    color: #5a6a4a;
    letter-spacing: 0.5px;
}
.side-refresh-btn {
    background: none;
    border: none;
    color: #7a9a5a;
    font-size: 16px;
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.2s, transform 0.3s;
    line-height: 1;
}
.side-refresh-btn:hover {
    color: #a8cc70;
    transform: rotate(180deg);
}
.side-loading {
    text-align: center;
    color: #555;
    font-size: 11px;
    padding: 12px 0;
    font-style: italic;
}

/* Override missions-list / leaderboard-list for inline use */
.panel-side .missions-list {
    max-height: none;
    flex: 1;
    overflow-y: auto;
    gap: 8px;
}
.panel-side .leaderboard-list {
    max-height: none;
    flex: 1;
    overflow-y: auto;
    gap: 4px;
}
/* Compact mission rows in side panel */
.panel-side .mission-row {
    padding: 8px 10px;
}
.panel-side .mission-label {
    font-size: 12px;
    margin-bottom: 6px;
}
/* Compact leaderboard rows in side panel */
.panel-side .lb-row {
    grid-template-columns: 28px 1fr auto auto;
    gap: 6px;
    padding: 5px 8px;
    font-size: 12px;
}
/* Hide kills count in narrow side panel */
.panel-side .lb-kills { display: none; }
.panel-side .lb-rank { display: none; }
.panel-side .lb-xp { font-size: 11px; }
.panel-side .lb-name { font-size: 12px; }
.panel-side .lb-pos { font-size: 13px; }