Mafia Closed Circle

MediaWiki:Common.css: відмінності між версіями

Повідомлення Обговорення

MediaWiki:Common.css (переглянути вихідний код)

Версія за 15:11, 6 квітня 2026

17 175 байтів вилучено ,  6 квітень
нема опису редагування
Немає опису редагування
Немає опису редагування
Рядок 1: Рядок 1:
/** Розміщений тут CSS буде застосовуватися до всіх тем оформлення */
/** MediaWiki:Common.css — Mafia Closed Circle
    Фінальна версія. Всі попередні версії замінені цим файлом.
    ============================================================ */


/* ==================================================== */
/* ============================================================
/* ЗАГАЛЬНІ СТИЛІ ТА UI */
  0. ШРИФТ
/* ==================================================== */
  ============================================================ */


@media (max-width: 720px) {
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');
  .r-box { float:none !important; margin-left:0 !important; }
  .content table { display:table !important; }
}
 
.overlay.search-overlay .search-content {
    background-color: #18151e;
    border-bottom: 0.2px solid rgba(255, 255, 255, 0.07)!important;
    color: #a19ce0!important;
}
 
.page-Main_Page .mw-first-heading { display: none!important; }
.page-Головна_сторінка .mw-first-heading { display: none!important; }
 
.overlay.search-overlay .search-content .caption { padding-left: 30px!important; }


.page-list li, .topic-title-list li, .site-link-list li {
/* ============================================================
    border-bottom: 0.2px solid rgba(255, 255, 255, 0.07)!important;
  1. БАЗОВІ СТИЛІ
}
  ============================================================ */
 
.overlay-header,
.minerva-header {
    border-top: none !important;
    margin-top: 0 !important;
}
 
.mw-ui-icon-mf-articlesSearch { visibility: hidden!important; display:none!important; background-image:none!important; }


body {
body {
Рядок 40: Рядок 20:
     background-position: center center !important;
     background-position: center center !important;
     background-attachment: fixed !important;
     background-attachment: fixed !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
}
html {
    overflow-y: scroll !important;
    scrollbar-gutter: stable !important;
}
}


#mw-mf-viewport,  
/* Прозорі обгортки щоб фон проглядався */
#mw-mf-viewport,
#mw-mf-page-center,
#mw-mf-page-center,
#content,  
#content,
.mw-body {
.mw-body {
     background-color: transparent !important;
     background-color: transparent !important;
}
}


.header-container.header-chrome {
.overlay-enabled,
     background-color: rgba(30, 30, 42, 0.85) !important;
.mw-body {
     backdrop-filter: blur(12px) !important;
     background-color: #15151f !important;
     -webkit-backdrop-filter: blur(12px) !important;
    color: #b7b4bf !important;
     padding-bottom: 140px !important;
     font-family: 'Manrope', sans-serif !important;
}
}


.list-thumb.list-thumb-none { background-color: #18151e!important; }
@media (max-width: 767px) {
 
    .overlay-enabled, .mw-body {
.overlay.search-overlay .results, .overlay.search-overlay .search-feedback {
        padding-bottom: 80px !important;
    background-color: #18151e!important;
     }
     color: white!important;
}
}


.overlay.search-overlay .results { box-shadow: none!important; }
/* Padding під фіксований header */
 
.mw-body {
.minerva-header .branding-box a { color: #b7b4bf!important; }
     padding-top: 70px !important;
 
.minerva-header .branding-box { opacity: 1.0!important; }
 
.minerva-icon--menu-base20, .minerva-icon--menu {
    filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(250deg) brightness(0%) contrast(101%);
}
 
.overlay-enabled, .mw-body {
    background-color: #15151f!important;
    color: #b7b4bf!important;
     padding-bottom: 140px!important;
}
}


@media (max-width: 767px) {
@media (max-width: 767px) {
     .overlay-enabled, .mw-body {
     .mw-body {
         padding-bottom: 80px!important;
         padding-top: 60px !important;
     }
     }
}
}


a.new { color: #ff7777!important; }
/* ============================================================
a.new:hover { color: #ff7777!important; }
  2. ПОСИЛАННЯ
a.new:visited { color: #ff7777!important; }
  ============================================================ */


a { color: #a19ce0!important; }
a               { color: #a19ce0 !important; }
a:hover { color: #a19ce0!important; }
a:hover         { color: #a19ce0 !important; }
a:visited { color: #a19ce0!important; }
a:visited       { color: #a19ce0 !important; }
a.new          { color: #ff7777 !important; }
a.new:hover    { color: #ff7777 !important; }
a.new:visited  { color: #ff7777 !important; }


.minerva-footer {
/* ============================================================
     background-color: #15151f!important;
  3. ТИПОГРАФІКА
     color: #b7b4bf!important;
  ============================================================ */
    display: none!important;
 
b, strong {
     font-weight: 600 !important;
     color: #ebebeb !important;
}
}


h4 {
h4 {
     opacity: 0.5!important;
     font-size: 11px !important;
     font-weight: 400!important;
     font-weight: 700 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    color: #b7b4bf !important;
    opacity: .45 !important;
    margin: 22px 0 8px !important;
}
}


.minerva__tab-container { display:none!important; }
/* H2 секції */
 
.content .mw-parser-output > h2,
#mw-mf-page-center { background-color: #15151f!important; }
.content .section-heading {
 
    font-size: 18px !important;
.content .mw-parser-output > h2, .content .section-heading {
    font-weight: 700 !important;
     border-bottom: 1px solid #232b3a!important;
    color: #ebebeb !important;
     padding-top: 30px!important;
     border-bottom: 1px solid #232b3a !important;
     padding-bottom: 10px!important;
     padding-top: 0 !important;
     padding-bottom: 10px !important;
    margin-top: 48px !important;
    margin-bottom: 18px !important;
}
}


.search-box .search {
/* Scroll offset — щоб секція не ховалась під header при anchor */
     background-color: #15151f!important;
.mw-parser-output h2,
    box-shadow: none!important;
.mw-parser-output .mw-headline {
    border: 1px solid #232b3a!important;
     scroll-margin-top: 80px !important;
    color: white!important;
}
}


b, strong { font-weight: 400!important; color: #ebebeb!important; }
blockquote {
 
    border-left: 4px solid #e74c3c;
.page-actions-menu {
    border-bottom: 1px solid rgba(231,76,60,0.2);
     box-sizing: border-box;
    padding: 20px 24px;
     border-top: 1px solid #232b3a!important;
    font-family: 'Linux Libertine', Georgia, serif;
     border-bottom: 1px solid #232b3a!important;
     font-size: 18px;
     margin-top: -1px;
     font-style: italic;
     display: none!important;  
     background: rgba(231,76,60,0.04);
     border-radius: 2px 12px 12px 2px;
     box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
}


.content ul { list-style-type: none!important; padding-left: 0em!important; }
.content hr {
 
    background-color: #3a3a4a !important;
.toc { background-color: #18151e!important; border: none!important; }
     height: 2px !important;
 
     border: 0 !important;
.content kbd, .content samp, .content code, .content pre { border: none!important; }
 
.content pre {
     padding-left: 0px!important;
     padding-top: 10px!important;
    padding-right: 0px!important;
    padding-bottom: 10px!important;
}
}


.content .mw-parser-output h1 .mw-editsection, .content .mw-parser-output h2 .mw-editsection, .content .mw-parser-output h3 .mw-editsection, .content .mw-parser-output h4 .mw-editsection, .content .mw-parser-output h5 .mw-editsection, .content .mw-parser-output h6 .mw-editsection {
@media (max-width: 720px) {
    visibility:hidden!important;
    .content hr {
     display:none!important;
        display: none !important;
     }
}
}


.page-Main_Page #page-secondary-actions a { display:none!important; }
/* ============================================================
.page-Головна_сторінка #page-secondary-actions a { display:none!important; }
  4. HEADER
 
  ============================================================ */
.mw-ui-icon-mf-expand { background-image:none!important; }
 
.mw-ui-icon-mf-expand:before {
    content: "+";
    color: white;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 1em;
    text-align: center;
    vertical-align: middle;
}
 
.mf-icon, .mf-icon--small, .mf-icon--large { display: inline-flex; align-items: center; justify-content: center; }
 
.mf-mw-ui-icon-rotate-flip { transform: rotate(45deg)!important; }
 
li.gallerybox div.thumb { background-color: #18151e!important; border: none!important; }
 
.image-details.is-visible { display: none!important; }
 
.content table, .content .infobox { text-align: center!important; }
 
.minerva-header .navigation-drawer .toggle-list__toggle { display:none!important; }
 
.minerva-user-navigation .minerva-notifications { display:none!important; }
 
.minerva-user-navigation > *:last-child { display: none!important; }
 
/* ==================================================== */
/* HEADER - ФІКСОВАНИЙ НА ВСЮ ШИРИНУ */
/* ==================================================== */


.header-container.header-chrome {
.header-container.header-chrome {
     background-color: rgba(30, 30, 42, 0.85) !important;
     background-color: rgba(30,30,42,0.88) !important;
     backdrop-filter: blur(12px) !important;
     backdrop-filter: blur(12px) !important;
     -webkit-backdrop-filter: blur(12px) !important;
     -webkit-backdrop-filter: blur(12px) !important;
     box-shadow: 5px 12px 24px rgba(0, 0, 0, 0.05) !important;
     box-shadow: 0 1px 0 rgba(255,255,255,0.05) !important;
     position: fixed !important;
     position: fixed !important;
     top: 0 !important;
     top: 0 !important; left: 0 !important; right: 0 !important;
    left: 0 !important;
    right: 0 !important;
     z-index: 1000 !important;
     z-index: 1000 !important;
     padding: 0 20px !important;
     padding: 0 20px !important;
     margin-left: 0 !important;
     margin-left: 0 !important;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
     border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
}


Рядок 212: Рядок 163:
}
}


.overlay-header,  
.overlay-header,
.minerva-header {
.minerva-header {
     border-top: none !important;
     border-top: none !important;
Рядок 218: Рядок 169:
}
}


/* Branding box - логотип + назва зліва */
/* Логотип + назва */
.minerva-header .branding-box {
.minerva-header .branding-box {
     display: flex !important;
     display: flex !important;
Рядок 233: Рядок 184:
}
}


/* Логотип */
/* Логотип */
.minerva-header .branding-box a::before {
.minerva-header .branding-box a::before {
     content: '' !important;
     content: '' !important;
     display: block !important;
     display: block !important;
     width: 40px !important;
     width: 40px !important; height: 40px !important;
    height: 40px !important;
     background-image: url('/images/d/d7/MafiaClosedCircleLogo.png') !important;
     background-image: url('/images/d/d7/MafiaClosedCircleLogo.png') !important;
     background-size: contain !important;
     background-size: contain !important;
Рядок 247: Рядок 195:
}
}


/* Назва сайту */
.minerva-header .branding-box a span {
.minerva-header .branding-box a span {
     font-size: 18px !important;
     font-size: 18px !important;
     font-weight: 500 !important;
     font-weight: 600 !important;
     color: #fff !important;
     color: #fff !important;
     white-space: nowrap !important;
     white-space: nowrap !important;
    font-family: 'Manrope', sans-serif !important;
}
}


/* Пошук - розтягується праворуч */
.minerva-header .branding-box a { color: #b7b4bf !important; }
.minerva-header .branding-box { opacity: 1 !important; }
 
/* Пошук */
.minerva-header .minerva-search-form {
.minerva-header .minerva-search-form {
     flex-grow: 1 !important;
     flex-grow: 1 !important;
Рядок 262: Рядок 213:
}
}


.minerva-header .search-box {
.minerva-header .search-box { width: 100% !important; position: relative !important; }
    width: 100% !important;
    position: relative !important;
}


.minerva-header .search-box .search {
.minerva-header .search-box .search {
Рядок 272: Рядок 220:
     border-radius: 8px !important;
     border-radius: 8px !important;
     background-color: #15151f !important;
     background-color: #15151f !important;
     border: 1px solid rgba(255, 255, 255, 0.1) !important;
     border: 1px solid rgba(255,255,255,0.10) !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
}
}


.minerva-header .search-box .search::placeholder {
.minerva-header .search-box .search::placeholder { color: rgba(255,255,255,0.35) !important; }
    color: rgba(255, 255, 255, 0.4) !important;
.minerva-header .search-box .search:focus { border-color: #a19ce0 !important; outline: none !important; }
}


.minerva-header .search-box .search:focus {
    border-color: #a19ce0 !important;
    outline: none !important;
}
/* Іконка лупи */
.minerva-header .search-box::before {
.minerva-header .search-box::before {
     content: '' !important;
     content: '' !important;
     position: absolute !important;
     position: absolute !important;
     left: 12px !important;
     left: 12px !important; top: 50% !important;
    top: 50% !important;
     transform: translateY(-50%) !important;
     transform: translateY(-50%) !important;
     width: 16px !important;
     width: 16px !important; height: 16px !important;
    height: 16px !important;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23888'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") !important;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23888'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") !important;
     background-size: contain !important;
     background-size: contain !important;
Рядок 300: Рядок 241:
}
}


/* Прибираємо стандартну іконку пошуку */
.minerva-header .search-box .search.minerva-icon--search { background-image: none !important; }
.minerva-header .search-box .search.minerva-icon--search {
.minerva-header .navigation-drawer { display: none !important; }
    background-image: none !important;
.minerva-user-navigation { display: none !important; }
.minerva-user-navigation > *:last-child { display: none !important; }
.minerva-user-navigation .minerva-notifications { display: none !important; }
.minerva-header .navigation-drawer .toggle-list__toggle { display: none !important; }
.minerva-icon--menu-base20, .minerva-icon--menu {
    filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(250deg) brightness(0%) contrast(101%);
}
}


/* Ховаємо зайве */
.minerva-footer { display: none !important; }
.minerva__tab-container { display: none !important; }
.page-actions-menu { display: none !important; }
.mw-ui-icon-mf-articlesSearch { visibility: hidden !important; display: none !important; }
.image-details.is-visible { display: none !important; }
#toc, .toc { display: none !important; }


/* Ховаємо меню та user navigation */
.content .mw-parser-output h1 .mw-editsection,
.minerva-header .navigation-drawer {
.content .mw-parser-output h2 .mw-editsection,
.content .mw-parser-output h3 .mw-editsection,
.content .mw-parser-output h4 .mw-editsection,
.content .mw-parser-output h5 .mw-editsection,
.content .mw-parser-output h6 .mw-editsection {
    visibility: hidden !important;
     display: none !important;
     display: none !important;
}
}


.minerva-user-navigation {
.page-Main_Page .mw-first-heading,
    display: none !important;
.page-Головна_сторінка .mw-first-heading { display: none !important; }
}


/* ==================================================== */
.page-Main_Page #page-secondary-actions a,
/* СТИЛІ ТАБЛИЦЬ У СТИЛІ LIQUIPEDIA */
.page-Головна_сторінка #page-secondary-actions a { display: none !important; }
/* ==================================================== */


.wikitable {
/* Мобільний header */
     border: none !important;
@media (max-width: 768px) {
     border-collapse: separate !important;
    .mobile-search-btn { display: flex; }
     border-spacing: 0 !important;
    .heading-holder { padding-top: 40px !important; }
     width: 100%;
     .minerva-header .minerva-search-form { display: none !important; }
     background-color: transparent !important;
     .minerva-header #searchIcon { display: none !important; }
     .header-container.header-chrome { padding: 6px 12px !important; }
    .minerva-header { padding: 4px 0 !important; gap: 10px !important; }
     .minerva-header .branding-box a::before { width: 28px !important; height: 28px !important; }
    .minerva-header .branding-box a span { font-size: 14px !important; }
     .mw-body { padding-top: 52px !important; }
}
}


.wikitable .external {
@media (max-width: 720px) {
    background: none !important;
    .minerva-header .branding-box a span { display: none !important; }
    padding-right: 0 !important;
}
}


.wikitable a.external::after {
/* ============================================================
    content: '' !important;
  5. ПОШУК — блокування overlay
  ============================================================ */
 
.overlay.search-overlay,
.search-overlay {
     display: none !important;
     display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
}


.wikitable > tr > th,  
body.overlay-enabled,
.wikitable > tr > td,
body.search-enabled {
.wikitable > * > tr > th,
     overflow: auto !important;
.wikitable > * > tr > td {
     position: static !important;
     border: none !important;
     background-color: #15151f !important;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
     padding: 8px 12px !important;
    background: none;
}
}


.wikitable > thead > tr > th,
#searchInput { pointer-events: auto !important; cursor: text !important; }
.wikitable > * > tr:first-child > th {
 
     background-color: rgba(24, 21, 30, 0.6) !important;
.search-box .search {
     border-bottom: 2px solid rgba(161, 156, 224, 0.3) !important;
     background-color: #15151f !important;
     font-weight: 500 !important;
     box-shadow: none !important;
     text-transform: uppercase;
     border: 1px solid #232b3a !important;
    font-size: 12px;
     color: white !important;
    letter-spacing: 0.5px;
    padding: 10px 12px !important;
}
}


.wikitable > tbody > tr:nth-child(odd) > td,
.overlay.search-overlay .search-content {
.wikitable > * > tr:nth-child(odd) > td {
     background-color: #18151e;
     background-color: rgba(24, 21, 30, 0.3) !important;
    border-bottom: 0.2px solid rgba(255,255,255,0.07) !important;
    color: #a19ce0 !important;
}
}


.wikitable > tbody > tr:nth-child(even) > td,
.overlay.search-overlay .search-content .caption { padding-left: 30px !important; }
.wikitable > * > tr:nth-child(even) > td {
.overlay.search-overlay .results,
     background-color: rgba(24, 21, 30, 0.5) !important;
.overlay.search-overlay .search-feedback {
     background-color: #18151e !important;
    color: white !important;
    box-shadow: none !important;
}
}


.wikitable > tbody > tr:hover > td,
/* ============================================================
.wikitable > * > tr:hover > td {
  6. КОНТЕНТ — відступ від l-box
    background-color: rgba(25, 87, 255, 0.15) !important;
  ============================================================ */
     transition: background-color 0.2s ease;
 
@media screen and (min-width: 1000px) {
    .banner-container,
    .minerva-anon-talk-message,
    .page-header-bar,
    .overlay-header,
    .content,
    .overlay-content,
    .content-unstyled,
    .pre-content,
    .post-content,
    #mw-content-text > form {
        margin-left: 280px !important;
    }
 
    /* Головна — центрована */
    .page-Головна_сторінка .banner-container,
    .page-Головна_сторінка .minerva-anon-talk-message,
    .page-Головна_сторінка .page-header-bar,
    .page-Головна_сторінка .overlay-header,
    .page-Головна_сторінка .content,
    .page-Головна_сторінка .overlay-content,
    .page-Головна_сторінка .content-unstyled,
    .page-Головна_сторінка .pre-content,
    .page-Головна_сторінка .post-content,
    .page-Головна_сторінка #mw-content-text > form {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 1200px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
 
    /* Сторінки з широкими таблицями */
    .page-Ігри .content,
    .page-Статистика .content,
    .page-Гравці .content,
    .page-Фундація .content,
    .page-Призовий_фонд .content,
    .page-Призові .content,
    .page-Фіналіст .content,
    .page-Титули .content,
    .page-Період .content,
    .page-Перша_статистика .content {
        margin-left: 16px !important;
        margin-right: 16px !important;
        width: calc(100% - 32px) !important;
        max-width: none !important;
    }
}
 
/* Media overlay — залишаємо робочим */
.mw-mmv-overlay,
.mw-mmv-image-wrapper,
.mw-mmv-main,
.overlay.media-overlay {
    display: block !important;
    visibility: visible !important;
     opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: 0 !important;
}
}


/* ==================================================== */
/* ============================================================
/* SORTABLE СТРІЛОЧКИ */
  7. WIKITABLE — основні стилі
/* ==================================================== */
  ============================================================ */


.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable),
.wikitable {
.jquery-tablesorter th.headerSort {
    border: none !important;
     background-color: rgba(24, 21, 30, 0.6) !important;
    border-collapse: separate !important;
     color: white !important;
    border-spacing: 0 !important;
     font-weight: 500 !important;
    width: 100%;
     padding: 10px 12px !important;
    background-color: transparent !important;
     padding-right: 24px !important;
    font-family: 'Manrope', sans-serif !important;
     background-image: none !important;
}
     cursor: pointer;
 
     position: relative;
/* Заголовки */
     user-select: none;
.content .mw-parser-output .wikitable > thead > tr > th,
.content .mw-parser-output .wikitable > * > tr:first-child > th {
     background-color: rgba(24,21,30,0.82) !important;
     color: #e8e6df !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 11.5px !important;
     font-weight: 700 !important;
     letter-spacing: .08em !important;
     text-transform: uppercase !important;
     padding: 11px 14px !important;
     border: none !important;
     border-bottom: 2px solid rgba(161,156,224,0.22) !important;
     white-space: nowrap !important;
}
}


.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable)::after,
/* Непарні рядки */
.jquery-tablesorter th.headerSort::after {
.content .mw-parser-output .wikitable > tbody > tr:nth-child(odd) > td,
    content: "⇅";
.content .mw-parser-output .wikitable > * > tr:nth-child(odd) > td {
    position: absolute;
     background-color: rgba(24,21,30,0.32) !important;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
     font-size: 14px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: normal;
}
}


.jquery-tablesorter th.headerSortUp::after {
/* Парні рядки */
    content: "▲";
.content .mw-parser-output .wikitable > tbody > tr:nth-child(even) > td,
     color: #a19ce0 !important;
.content .mw-parser-output .wikitable > * > tr:nth-child(even) > td {
    font-size: 12px;
     background-color: rgba(24,21,30,0.55) !important;
}
}


.jquery-tablesorter th.headerSortDown::after {
/* Всі td */
     content: "▼";
.content .mw-parser-output .wikitable > tbody > tr > td,
     color: #a19ce0 !important;
.content .mw-parser-output .wikitable > * > tr > td {
     font-size: 12px;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding: 10px 14px !important;
    font-family: 'Manrope', sans-serif !important;
     font-size: 14px !important;
     color: #b7b4bf !important;
     vertical-align: middle !important;
}
}


.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable):hover,  
/* Hover */
.jquery-tablesorter th.headerSort:hover {
.content .mw-parser-output .wikitable > tbody > tr:hover > td,
     background-color: rgba(25, 87, 255, 0.4) !important;
.content .mw-parser-output .wikitable > * > tr:hover > td {
     transition: background-color 0.2s ease;
     background-color: rgba(25,87,255,0.12) !important;
     transition: background-color 0.12s ease !important;
}
}


.wikitable > tbody > tr:first-child > td,
/* Перший/останній рядок */
.wikitable > * > tr:first-child > td {
.content .mw-parser-output .wikitable > tbody > tr:first-child > td,
.content .mw-parser-output .wikitable > * > tr:first-child > td {
     border-top: none !important;
     border-top: none !important;
}
}


.wikitable > tbody > tr:last-child > td,
.content .mw-parser-output .wikitable > tbody > tr:last-child > td,
.wikitable > * > tr:last-child > td {
.content .mw-parser-output .wikitable > * > tr:last-child > td {
     border-bottom: none !important;
     border-bottom: none !important;
}
}


.wikitable td {
.content .mw-parser-output .wikitable td {
     vertical-align: middle !important;
     vertical-align: middle !important;
}
}


@media (max-width: 768px) {
/* Посилання в таблицях */
    .wikitable > tr > th,
.content .mw-parser-output .wikitable td a {
    .wikitable > tr > td,
     color: #a19ce0 !important;
    .wikitable > * > tr > th,
    font-weight: 500 !important;
    .wikitable > * > tr > td {
        padding: 6px 8px !important;
        font-size: 13px;
    }
   
    .client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable),
     .jquery-tablesorter th.headerSort {
        padding: 8px 8px !important;
        padding-right: 20px !important;
        font-size: 11px;
    }
}
}


/* ==================================================== */
.content .mw-parser-output .wikitable td a:hover {
/* HOME PAGE BLOCKS */
    color: #c4bfff !important;
/* ==================================================== */
    text-decoration: underline !important;
}


.flex__block {
/* External links в таблицях — без іконки */
    display: flex;
.wikitable .external { background: none !important; padding-right: 0 !important; }
    justify-content: space-between;
.wikitable a.external::after { content: '' !important; display: none !important; }
    align-items: center
}


.home__blocks {
/* ============================================================
    gap: 20px;
  8. СОРТУВАННЯ
    align-items: stretch;
  ============================================================ */
    margin-bottom: 20px;
}


.home__block {
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable),
     align-items: stretch;
.jquery-tablesorter th.headerSort {
     width: 33.3333%;
     background-color: rgba(24,21,30,0.82) !important;
     flex-direction: column
    color: #e8e6df !important;
    font-family: 'Manrope', sans-serif !important;
     font-weight: 700 !important;
    font-size: 11.5px !important;
     letter-spacing: .08em !important;
    text-transform: uppercase !important;
    padding: 11px 14px !important;
    padding-right: 24px !important;
    background-image: none !important;
    cursor: pointer !important;
    position: relative !important;
    user-select: none !important;
    white-space: nowrap !important;
    border-bottom: 2px solid rgba(161,156,224,0.22) !important;
}
}


.home__block-inner {
/* Іконка сортування */
     align-items: stretch;
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable)::after,
     gap: 0px;
.jquery-tablesorter th.headerSort::after {
     flex-direction: column;
     content: "⇅" !important;
     flex-grow: 0;
    position: absolute !important;
     border: 1px solid rgba(255, 255, 255, 0.1);
    right: 7px !important;
     top: 50% !important;
     transform: translateY(-50%) !important;
     font-size: 11px !important;
     color: rgba(255,255,255,0.22) !important;
    font-weight: 400 !important;
}
}


.home__block-image-block {
.jquery-tablesorter th.headerSortUp::after {
     flex-direction: column;
     content: "▲" !important;
    border-radius: 0px;
     color: #a19ce0 !important;
     background-image: url(https://mafiacc.site/images/d/df/Bg_03.png);
     font-size: 11px !important;
     background-size: cover;
}
}


.home__block-image {
.jquery-tablesorter th.headerSortDown::after {
     text-align: center;
     content: "▼" !important;
     padding-top: 20px;
    color: #a19ce0 !important;
     font-size: 11px !important;
}
}


.home__block-icon {
/* Hover */
    width: 96px;
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable):hover,
    height: 96px;
.jquery-tablesorter th.headerSort:hover {
    display: inline-block;
     background-color: rgba(25,87,255,0.28) !important;
    background-position: center center;
     transition: background-color 0.15s ease !important;
     background-size: contain;
     background-repeat: no-repeat;
}
}


.home__block-icon-1 {
/* ============================================================
    background-image: url(https://mafiacc.site/images/d/dc/Block_01.png)
  9. АНІМАЦІЯ РЯДКІВ
}
  ============================================================ */


.home__block-icon-2 {
.wikitable tbody tr {
     background-image: url(https://mafiacc.site/images/5/5f/Block_02.png)
     animation: mcc-row-in 0.30s ease both;
}
}


.home__block-icon-3 {
.wikitable tbody tr:nth-child(1)  { animation-delay: 0.03s; }
    background-image: url(https://mafiacc.site/images/0/00/Block_03.png)
.wikitable tbody tr:nth-child(2)  { animation-delay: 0.06s; }
}
.wikitable tbody tr:nth-child(3)  { animation-delay: 0.09s; }
.wikitable tbody tr:nth-child(4)  { animation-delay: 0.12s; }
.wikitable tbody tr:nth-child(5)  { animation-delay: 0.15s; }
.wikitable tbody tr:nth-child(6)  { animation-delay: 0.18s; }
.wikitable tbody tr:nth-child(7)  { animation-delay: 0.21s; }
.wikitable tbody tr:nth-child(8)  { animation-delay: 0.24s; }
.wikitable tbody tr:nth-child(9)  { animation-delay: 0.27s; }
.wikitable tbody tr:nth-child(10) { animation-delay: 0.30s; }
.wikitable tbody tr:nth-child(n+11) { animation-delay: 0.33s; }


.home__block-content {
@keyframes mcc-row-in {
     flex-grow: 0;
     from { opacity: 0; transform: translateX(-5px); }
     flex-direction: column;
     to  { opacity: 1; transform: translateX(0); }
    align-items: stretch
}
}


.home__block-content-inner {
/* Після сортування — клас додається JS */
    border-radius: 0px;
.wikitable.mcc-sorting tbody tr { animation: none; }
    background: none;
.wikitable.mcc-sorted  tbody tr { animation: mcc-row-in 0.25s ease both; }
    padding-left: 20px;
.wikitable.mcc-sorted tbody tr:nth-child(1)  { animation-delay: 0.02s; }
    padding-top: 20px;
.wikitable.mcc-sorted tbody tr:nth-child(2)  { animation-delay: 0.04s; }
    padding-right: 20px;
.wikitable.mcc-sorted tbody tr:nth-child(3)  { animation-delay: 0.06s; }
    padding-bottom: 0px;
.wikitable.mcc-sorted tbody tr:nth-child(4)  { animation-delay: 0.08s; }
    flex-grow: 0;
.wikitable.mcc-sorted tbody tr:nth-child(5)  { animation-delay: 0.10s; }
}
.wikitable.mcc-sorted tbody tr:nth-child(6)  { animation-delay: 0.12s; }
.wikitable.mcc-sorted tbody tr:nth-child(7)  { animation-delay: 0.14s; }
.wikitable.mcc-sorted tbody tr:nth-child(8)  { animation-delay: 0.16s; }
.wikitable.mcc-sorted tbody tr:nth-child(9)  { animation-delay: 0.18s; }
.wikitable.mcc-sorted tbody tr:nth-child(10) { animation-delay: 0.20s; }
.wikitable.mcc-sorted tbody tr:nth-child(n+11) { animation-delay: 0.22s; }


.home__block-content-title {
/* ============================================================
    line-height: 1;
  10. ШИРОКІ ТАБЛИЦІ — горизонтальний скрол
    padding-bottom: 10px;
  ============================================================ */
}


.home__block-content-inner pre {
/* Обгортка — додається JS */
     font-family: 'Helvetica'!important;
.mcc-scroll-outer {
    padding: 0!important;
     position: relative;
    display: block!important;
}
}


.home__block-content-title .content p {
.mcc-scroll-outer::after {
     margin: 0!important;
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, rgba(21,21,31,0.90));
    pointer-events: none;
    transition: opacity 0.25s;
     border-radius: 0 6px 6px 0;
}
}


@media (max-width: 768px) {
.mcc-scroll-outer.mcc-no-fade::after { opacity: 0; }
    .home__blocks {
        display:block;
        padding-top: 10px;
    }


    .home__block-content-title {
.mcc-scroll-inner {
        padding-bottom: 10px;
    overflow-x: auto;
     }
     -webkit-overflow-scrolling: touch;
}


    .home__block {
.mcc-wide-table { min-width: 860px; }
        width:100%;
    }


    .home__block-content-inner {  
/* Сторінки з широкими таблицями */
        margin-bottom: 10px;
.page-Ігри .mw-parser-output,
    }
.page-Статистика .mw-parser-output,
.page-Гравці .mw-parser-output,
.page-Фундація .mw-parser-output,
.page-Призовий_фонд .mw-parser-output,
.page-Призові .mw-parser-output,
.page-Фіналіст .mw-parser-output,
.page-Титули .mw-parser-output,
.page-Період .mw-parser-output,
.page-Перша_статистика .mw-parser-output {
    overflow-x: auto !important;
}
}


/* ==================================================== */
/* Компактний стиль для широких таблиць */
/* BACKGROUND */
.wide-table,
/* ==================================================== */
.page-Ігри .wikitable,
.page-Статистика .wikitable,
.page-Гравці .wikitable,
.page-Фундація .wikitable,
.page-Призовий_фонд .wikitable,
.page-Призові .wikitable,
.page-Фіналіст .wikitable,
.page-Титули .wikitable,
.page-Період .wikitable,
.page-Перша_статистика .wikitable {
    width: 100% !important;
    font-size: 12px !important;
    table-layout: auto !important;
}


#mw-mf-viewport, #content, .header-container, .mw-body {
/* ============================================================
    background-size: cover !important;
  11. ВІНРЕЙТ — кольорове підсвічення
    background-repeat: no-repeat !important;
  ============================================================ */
    background-position: center center !important;
    background-attachment: fixed !important;
}


@media (max-width: 994px) {
.wr-hi { color: #5aaa80 !important; }
  .harley {
.wr-lo { color: #c06070 !important; }
    display:none
  }
}


/* ==================================================== */
/* ============================================================
/* ГЕРОЇ */
  12. L-BOX — БІЧНЕ МЕНЮ
/* ==================================================== */
  ============================================================ */


.mcc-heroes-list {
.l-box {
  padding-top: 20px!important;
    position: fixed;
  display: flex;
    top: 80px;
  flex-wrap: wrap;
    left: 20px;
  gap: 8px;
    z-index: 100;
  list-style: none;
    width: 220px;
  padding: 0;
    background: none;
  margin: 0;
    font-size: 13.5px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}
}


.mcc-heroes-list li {
.l-box-item {
  margin: 0;
    display: flex !important;
  padding: 0;
    align-items: center !important;
  width: calc((100% - 32px) / 5);
    padding: 10px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    border-left: 3px solid transparent !important;
    color: #8ab4f8 !important;
    cursor: pointer !important;
    transition: all 0.14s !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}
}


.mcc-hero-card {
.l-box-item span:first-child { flex: 1; }
  position: relative;
 
  display: block;
.l-box-item:hover {
  width: 100%;
    background: #373752 !important;
  border-radius: 0;
    border-left-color: #555 !important;
  overflow: hidden;
    color: #fff !important;
  background: #1a1a2e;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
}


.mcc-hero-card:hover {
.l-box-item.active {
  transform: translateY(-4px);
    background: #373752 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-left-color: #8ab4f8 !important;
    color: #fff !important;
    font-weight: 600 !important;
}
}


.mcc-hero-card .hero-image-wiki,
.l-box-item-last { border-bottom: none !important; }
.mcc-hero-card .hero-image-wiki img,
.mcc-hero-card .mw-file-element,
.mcc-hero-card a.mw-file-description {
  display: block;
  width: 100%;
  height: auto;
}


.mcc-hero-info {
/* Badge — помаранчевий */
  position: absolute;
.mcc-badge {
  bottom: 0;
    background: rgba(210,130,60,0.18);
  left: 0;
    border-radius: 20px;
  right: 0;
    padding: 1px 7px;
  padding: 0px 12px 12px;
    font-size: 10.5px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
    color: #d4895a;
  color: #fff;
    font-weight: 700;
    flex-shrink: 0;
    margin-left: 6px;
}
}


.mcc-hero-nickname {
@media (max-width: 1400px) {
  font-weight: 700;
    .l-box { display: none !important; }
  font-size: 1.1em;
}
}


.mcc-hero-nickname a,
/* ============================================================
.mcc-hero-nickname a:visited {
  13. R-BOX — ПРАВА ПАНЕЛЬ
  color: #fff !important;
  ============================================================ */
  text-decoration: none;
  background: none !important;
  padding-right: 0 !important;
}


.mcc-hero-nickname a:hover {
.r-box,
  text-decoration: underline;
.tournament-box,
  color: #fff !important;
.series-box {
}
    position: fixed !important;
    top: 80px !important;
    right: 20px !important;
    z-index: 100 !important;
    width: 300px !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    padding: 0 !important;


.mcc-hero-nickname a.external,
    background: rgba(22,20,30,0.88) !important;
.mcc-hero-nickname a.external:after,
    backdrop-filter: blur(10px) !important;
.mcc-hero-nickname a.extiw,
    -webkit-backdrop-filter: blur(10px) !important;
.mcc-hero-nickname a.extiw:after {
    border: 1px solid #232b3a !important;
  background-image: none !important;
    border-radius: 10px !important;
  padding-right: 0 !important;
}
}


.mcc-hero-nickname a.external::after,
/* Фото */
.mcc-hero-nickname a.extiw::after {
.r-box figure,
  content: none !important;
.tournament-box figure,
  display: none !important;
.series-box figure {
    margin: 0 !important;
    display: block !important;
}
}


.mcc-hero-role {
.r-box figure img,
  color: #ffd700;
.tournament-box figure img,
  font-size: 0.85em;
.series-box figure img {
  font-weight: 600;
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
    border-radius: 0 !important;
}
}


.mcc-hero-date {
/* Champion banner */
  font-size: 0.85em;
.rp-champion {
  opacity: 0.7;
    border: 1px solid rgba(255,215,0,0.18);
    border-radius: 6px;
    background: rgba(255,215,0,0.05);
    padding: 12px 14px;
    text-align: center;
    margin: 12px;
}
}


.mcc-champion-card {
.rp-ch-lbl {
  box-shadow: 0 0 0 0.5px orange;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #c8a840;
    opacity: .8;
    margin-bottom: 3px;
}
}


.mcc-champion-card:hover {
.rp-ch-name {
  box-shadow: 0 0 0 1px #ffd700, 0 8px 24px rgba(0, 0, 0, 0.4);
    font-size: 17px;
    font-weight: 800;
    color: #ffd700;
    font-family: 'Manrope', sans-serif;
}
}


@media (max-width: 768px) {
/* Info таблиця всередині r-box */
  .mcc-heroes-list {
.r-box-info-table {
    padding: 0;
     width: 100% !important;
    gap: 12px;
    border-collapse: collapse !important;
  }
     margin: 0 !important;
 
     background: none !important;
  .mcc-heroes-list li {
     text-align: left !important;
     width: calc((100% - 12px) / 2);
  }
 
  .mcc-hero-info {
     padding: 30px 8px 8px;
  }
 
  .mcc-hero-nickname {
     font-size: 1em;
  }
 
  .mcc-hero-date {
     font-size: 0.75em;
  }
}
}


@media (max-width: 360px) {
.r-box-info-table tr {
  .mcc-heroes-list {
     border-bottom: 1px solid rgba(255,255,255,0.05) !important;
     padding: 0 12px;
     animation: none !important; /* без анімації в info таблиці */
    gap: 8px;
  }
 
  .mcc-heroes-list li {
    width: calc((100% - 8px) / 2);
  }
 
  .mcc-hero-nickname {
     font-size: 0.9em;
  }
}
}


/* ==================================================== */
.r-box-info-table tr:last-child { border-bottom: none !important; }
/* КНОПКА ЗАПИСУ ГРИ */
/* ==================================================== */


.game-record-btn {
.r-box-info-table th,
    display: inline-block;
.r-box-info-table td {
     padding: 4px 8px;
     padding: 8px 14px !important;
     background-color: #d02f2f;
     font-size: 12.5px !important;
     color: white;
     font-family: 'Manrope', sans-serif !important;
    border-radius: 4px;
     background: none !important;
     font-size: 13px;
     border: none !important;
     cursor: pointer;
     border-bottom: 1px solid rgba(255,255,255,0.05) !important;
     transition: opacity 0.2s;
}
}


.game-record-btn:hover {
.r-box-info-table th {
     opacity: 0.7;
    font-weight: 500 !important;
    color: #b7b4bf !important;
     opacity: .55 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    width: 50% !important;
}
}


.game-record-btn a {
.r-box-info-table td {
     color: white !important;
    text-align: right !important;
     text-decoration: none !important;
     color: #ebebeb !important;
     font-weight: 600 !important;
    width: 50% !important;
}
}


/* ==================================================== */
.r-box-gold { color: #c8a840 !important; }
/* НАВІГАЦІЯ - ГРАВЦІ, ТУРНІРИ, СЕРІЇ, ЧЕМПІОНАТИ */
/* ==================================================== */


.player-nav,
/* Навігація (стрілки) всередині r-box */
.tournament-nav,
.tournament-nav,
.series-nav,
.series-nav,
.player-nav,
.championship-nav {
.championship-nav {
     display: flex;
     display: flex !important;
     justify-content: space-between;
     justify-content: space-between !important;
     align-items: center;
     align-items: center !important;
     padding: 10px;
     padding: 12px 14px !important;
     margin-bottom: 10px;
     margin-bottom: 0 !important;
     font-size: 14px;
     font-size: 14px !important;
     background-color: #18151e;
    font-family: 'Manrope', sans-serif !important;
     border-radius: 10px;
     background: rgba(18,15,24,0.9) !important;
     border-radius: 10px 10px 0 0 !important;
    border-bottom: 1px solid #232b3a !important;
}
}


.player-nav-prev, .player-nav-next,
.tournament-nav-prev, .tournament-nav-next,
.tournament-nav-prev, .tournament-nav-next,
.series-nav-prev, .series-nav-next,
.series-nav-prev, .series-nav-next,
.player-nav-prev, .player-nav-next,
.championship-nav-prev, .championship-nav-next {
.championship-nav-prev, .championship-nav-next {
     font-size: 20px;
     font-size: 18px !important;
     font-weight: bold;
     font-weight: bold !important;
     min-width: 30px;
     min-width: 28px !important;
     text-align: center;
     text-align: center !important;
}
}


.player-nav-prev a, .player-nav-next a,
.tournament-nav-prev a, .tournament-nav-next a,
.tournament-nav-prev a, .tournament-nav-next a,
.series-nav-prev a, .series-nav-next a,
.series-nav-prev a, .series-nav-next a,
.player-nav-prev a, .player-nav-next a,
.championship-nav-prev a, .championship-nav-next a {
.championship-nav-prev a, .championship-nav-next a {
     color: white !important;
     color: #b7b4bf !important;
     text-decoration: none;
     text-decoration: none !important;
     transition: opacity 0.2s;
     transition: color 0.15s !important;
}
}


.player-nav-prev a:hover, .player-nav-next a:hover,
.tournament-nav-prev a:hover, .tournament-nav-next a:hover,
.tournament-nav-prev a:hover, .tournament-nav-next a:hover,
.series-nav-prev a:hover, .series-nav-next a:hover,
.series-nav-prev a:hover, .series-nav-next a:hover,
.player-nav-prev a:hover, .player-nav-next a:hover,
.championship-nav-prev a:hover, .championship-nav-next a:hover {
.championship-nav-prev a:hover, .championship-nav-next a:hover {
     opacity: 0.7;
     color: #fff !important;
}
}


.player-nav-name,
.tournament-nav-name,
.tournament-nav-name,
.series-nav-name,
.series-nav-name,
.player-nav-name,
.championship-nav-name {
.championship-nav-name {
     flex: 1;
     flex: 1 !important;
     text-align: center;
     text-align: center !important;
     font-weight: bold;
     font-weight: 700 !important;
     color: white;
     color: white !important;
    font-size: 16px;
     font-size: 15px !important;
}
     font-family: 'Manrope', sans-serif !important;
 
/* ==================================================== */
/* L-BOX МЕНЮ */
/* ==================================================== */
 
.l-box {
    position: fixed;
    top: 100px !important;
    left: 20px;
    z-index: 100;
    width: 220px;
    background: none;
    border-radius: 4px;
     font-size: 13px;
    max-height: calc(100vh - 100px) !important;
     overflow-y: auto;
}
 
.l-box-item {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    border-left: 3px solid transparent;
    color: #8ab4f8;
    cursor: pointer;
    transition: all 0.15s;
}
 
.l-box-item-last {
    border-bottom: none;
}
 
.l-box-item:hover {
    background: #373752;
    border-left-color: #555;
    color: #fff;
}
 
.l-box-item.active {
    background: #373752;
    border-left-color: #8ab4f8;
    color: #fff;
}
 
@media (max-width: 1400px) {
    .l-box {
        display: none !important;
    }
}
 
/* ==================================================== */
/* R-BOX ПАНЕЛІ */
/* ==================================================== */
 
.r-box, .tournament-box, .series-box {
    top: 100px !important;
    max-height: calc(100vh - 100px) !important;
}
}


/* R-box мобільна */
@media (max-width: 1200px) {
@media (max-width: 1200px) {
     .r-box, .tournament-box, .series-box {
     .r-box, .tournament-box, .series-box {
Рядок 866: Рядок 891:
         width: 100% !important;
         width: 100% !important;
         max-width: none !important;
         max-width: none !important;
         margin: 0 !important;
         margin: 0 0 20px 0 !important;
         top: auto !important;
         top: auto !important; right: auto !important;
        right: auto !important;
         max-height: none !important;
         max-height: none !important;
         overflow-y: visible !important;
         overflow-y: visible !important;
        border-radius: 8px !important;
     }
     }
}
}


/* ==================================================== */
/* R-box мобільна — фото */
/* PROFILE LINKS */
/* ==================================================== */
 
.profile-links {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 10px;
}
 
.profile-links-title {
    text-align: center;
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
}
 
.profile-links-icons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
 
.profile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}
 
.profile-icon img {
    display: block;
    height: 24px;
    width: auto;
}
 
/* ==================================================== */
/* TOC */
/* ==================================================== */
 
#toc, .toc {
    display: none !important;
}
 
.r-box ~ * #toc,
.r-box ~ * .toc {
    display: none !important;
}
 
/* ==================================================== */
/* КОНТЕНТ - MARGIN-LEFT ДЛЯ СТОРІНОК З МЕНЮ */
/* ==================================================== */
 
@media screen and (min-width: 1000px) {
    .banner-container,
    .minerva-anon-talk-message,
    .page-header-bar,
    .overlay-header,
    .content,
    .overlay-content,
    .content-unstyled,
    .pre-content,
    .post-content,
    #mw-content-text > form {
        margin-left: 280px !important;
    }
   
    .page-Головна_сторінка .banner-container,
    .page-Головна_сторінка .minerva-anon-talk-message,
    .page-Головна_сторінка .page-header-bar,
    .page-Головна_сторінка .overlay-header,
    .page-Головна_сторінка .content,
    .page-Головна_сторінка .overlay-content,
    .page-Головна_сторінка .content-unstyled,
    .page-Головна_сторінка .pre-content,
    .page-Головна_сторінка .post-content,
    .page-Головна_сторінка #mw-content-text > form {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 1200px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
 
/* ==================================================== */
/* МОБІЛЬНА ВЕРСІЯ HEADER */
/* ==================================================== */
 
/* ==================================================== */
/* МОБІЛЬНА ВЕРСІЯ - АВАТАРКА ГРАВЦЯ */
/* ==================================================== */
 
@media (max-width: 768px) {
@media (max-width: 768px) {
    /* Контейнер аватарки */
    .r-box figure {
        margin: 0 !important;
        width: 100% !important;
        overflow: hidden;
    }
   
    /* Обгортка посилання */
     .r-box figure a.mw-file-description {
     .r-box figure a.mw-file-description {
         display: block;
         display: block;
Рядок 985: Рядок 907:
         overflow: hidden;
         overflow: hidden;
     }
     }
   
 
    /* Саме зображення */
     .r-box figure .mw-file-element,
     .r-box figure .mw-file-element,
     .r-box figure img {
     .r-box figure img {
Рядок 996: Рядок 917:
}
}


/* ==================================================== */
/* ============================================================
/* ФІКС ПОШУКУ - БЛОКУВАННЯ ТІЛЬКИ SEARCH OVERLAY */
  14. PLAYER TABS
/* ==================================================== */
  ============================================================ */
 
/* Фіксуємо scroll */
html {
    overflow-y: scroll !important;
    scrollbar-gutter: stable !important;
}
 
/* Контент завжди має правильний padding-top */
.mw-body {
    padding-top: 70px !important;
}
 
@media (max-width: 767px) {
    .mw-body {
        padding-top: 60px !important;
    }
}
 
/* Ховаємо ТІЛЬКИ search overlay */
.overlay.search-overlay {
    display: none !important;
    visibility: hidden !important;
}
 
/* Поле пошуку - завжди активне */
#searchInput {
    pointer-events: auto !important;
    cursor: text !important;
}
 
/* Дозволяємо media overlay (галерея зображень) працювати */
.mw-mmv-overlay,
.mw-mmv-image-wrapper,
.mw-mmv-main,
.overlay.media-overlay {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: 0 !important;
    height: auto !important;
    width: auto !important;
}
 
/* ==================================================== */
/* ШИРОКІ ТАБЛИЦІ - ПОВНА ШИРИНА */
/* ==================================================== */
 
/* Сторінки з широкими таблицями - перезаписуємо Minerva стилі */
@media screen and (min-width: 1000px) {
    .page-Ігри .content,
    .page-Ігри .pre-content,
    .page-Ігри .post-content,
    .page-Ігри .banner-container,
    .page-Статистика .content,
    .page-Статистика .pre-content,
    .page-Статистика .post-content,
    .page-Статистика .banner-container,
    .page-Гравці .content,
    .page-Гравці .pre-content,
    .page-Гравці .post-content,
    .page-Гравці .banner-container,
    .page-Фундація .content,
    .page-Фундація .pre-content,
    .page-Фундація .post-content,
    .page-Фундація .banner-container,
    .page-Призовий_фонд .content,
    .page-Призовий_фонд .pre-content,
    .page-Призовий_фонд .post-content,
    .page-Призовий_фонд .banner-container,
    .page-Призові .content,
    .page-Призові .pre-content,
    .page-Призові .post-content,
    .page-Призові .banner-container,
    .page-Фіналіст .content,
    .page-Фіналіст .pre-content,
    .page-Фіналіст .post-content,
    .page-Фіналіст .banner-container,
    .page-Титули .content,
    .page-Титули .pre-content,
    .page-Титули .post-content,
    .page-Титули .banner-container,
    .page-Період .content,
    .page-Період .pre-content,
    .page-Період .post-content,
    .page-Період .banner-container,
    .page-Перша_статистика .content,
    .page-Перша_статистика .pre-content,
    .page-Перша_статистика .post-content,
    .page-Перша_статистика .banner-container {
        margin-left: 16px !important;
        margin-right: 16px !important;
        width: calc(100% - 32px) !important;
        max-width: none !important;
    }
}
 
/* Широка таблиця - компактний стиль */
.wide-table,
.page-Ігри .wikitable,
.page-Статистика .wikitable,
.page-Гравці .wikitable,
.page-Фундація .wikitable,
.page-Призовий_фонд .wikitable,
.page-Призові .wikitable,
.page-Фіналіст .wikitable,
.page-Титули .wikitable,
.page-Період .wikitable,
.page-Перша_статистика .wikitable {
    width: 100% !important;
    font-size: 12px !important;
    table-layout: auto !important;
}
 
.wide-table th,
.wide-table td,
.page-Ігри .wikitable th,
.page-Ігри .wikitable td,
.page-Статистика .wikitable th,
.page-Статистика .wikitable td,
.page-Гравці .wikitable th,
.page-Гравці .wikitable td,
.page-Фундація .wikitable th,
.page-Фундація .wikitable td,
.page-Призовий_фонд .wikitable th,
.page-Призовий_фонд .wikitable td,
.page-Призові .wikitable th,
.page-Призові .wikitable td,
.page-Фіналіст .wikitable th,
.page-Фіналіст .wikitable td,
.page-Титули .wikitable th,
.page-Титули .wikitable td,
.page-Період .wikitable th,
.page-Період .wikitable td,
.page-Перша_статистика .wikitable th,
.page-Перша_статистика .wikitable td {
    padding: 6px 8px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
}
 
/* Заголовки компактніші */
.wide-table th,
.page-Ігри .wikitable th,
.page-Статистика .wikitable th,
.page-Гравці .wikitable th,
.page-Фундація .wikitable th,
.page-Призовий_фонд .wikitable th,
.page-Призові .wikitable th,
.page-Фіналіст .wikitable th,
.page-Титули .wikitable th,
.page-Період .wikitable th,
.page-Перша_статистика .wikitable th {
    font-size: 11px !important;
    padding: 8px 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}
 
/* Горизонтальний скрол якщо не влазить */
.page-Ігри .mw-parser-output,
.page-Статистика .mw-parser-output,
.page-Гравці .mw-parser-output,
.page-Фундація .mw-parser-output,
.page-Призовий_фонд .mw-parser-output,
.page-Призові .mw-parser-output,
.page-Фіналіст .mw-parser-output,
.page-Титули .mw-parser-output,
.page-Період .mw-parser-output,
.page-Перша_статистика .mw-parser-output {
    overflow-x: auto !important;
}
 
/* ==================================================== */
/* PLAYER TABS - LIQUIPEDIA STYLE */
/* ==================================================== */


.player-tabs {
.player-tabs {
Рядок 1188: Рядок 932:
     padding: 12px 24px;
     padding: 12px 24px;
     cursor: pointer;
     cursor: pointer;
     color: #888;
     color: rgba(255,255,255,0.38);
     font-size: 14px;
     font-size: 14.5px;
     font-weight: 500;
     font-weight: 500;
    font-family: 'Manrope', sans-serif;
     border-bottom: 2px solid transparent;
     border-bottom: 2px solid transparent;
     margin-bottom: -2px;
     margin-bottom: -2px;
     transition: all 0.2s ease;
     transition: color 0.18s, border-color 0.18s;
     user-select: none;
     user-select: none;
}
}


.player-tab:hover {
.player-tab:hover { color: rgba(255,255,255,0.7); background: transparent; }
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}


.player-tab.active {
.player-tab.active {
     color: #fff;
     color: #fff !important;
     border-bottom-color: #a19ce0;
     border-bottom-color: #a19ce0 !important;
     background: rgba(161, 156, 224, 0.1);
     background: transparent !important;
}
}


.player-tab-content {
.player-tab-content { display: none; }
    display: none;
}


.player-tab-content.active {
.player-tab-content.active {
     display: block;
     display: block;
     animation: fadeIn 0.3s ease;
     animation: mcc-fade-in 0.28s ease both;
}
}


@keyframes fadeIn {
@keyframes mcc-fade-in {
     from { opacity: 0; transform: translateY(10px); }
     from { opacity: 0; transform: translateY(8px); }
     to { opacity: 1; transform: translateY(0); }
     to   { opacity: 1; transform: translateY(0); }
}
}


Рядок 1227: Рядок 967:
     color: #888;
     color: #888;
     font-size: 14px;
     font-size: 14px;
    font-family: 'Manrope', sans-serif;
}
}


Рядок 1232: Рядок 973:
     content: '';
     content: '';
     display: block;
     display: block;
     width: 32px;
     width: 28px; height: 28px;
    height: 32px;
     margin: 0 auto 16px;
     margin: 0 auto 16px;
     border: 3px solid rgba(161, 156, 224, 0.2);
     border: 2px solid rgba(161,156,224,0.2);
     border-top-color: #a19ce0;
     border-top-color: #a19ce0;
     border-radius: 50%;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     animation: mcc-spin 0.8s linear infinite;
}
 
@keyframes spin {
    to { transform: rotate(360deg); }
}
 
@media (max-width: 768px) {
    .player-tabs {
        margin-top: 16px;
        margin-bottom: 16px;
    }
   
    .player-tab {
        padding: 10px 16px;
        font-size: 13px;
        flex: 1;
        text-align: center;
    }
}
 
/* ==================================================== */
/* МОБІЛЬНА ВЕРСІЯ - ПОШУК ТА КОМПАКТНИЙ ХЕДЕР */
/* ==================================================== */
 
/* Кнопка пошуку */
.mobile-search-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
    transition: background 0.2s;
}
 
.mobile-search-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}
 
.mobile-search-btn svg {
    display: block;
}
 
/* Overlay пошуку */
.mobile-search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    background: rgba(21, 21, 31, 0.98);
    padding: 12px;
    align-items: flex-start;
    gap: 10px;
}
 
.mobile-search-overlay.active {
    display: flex;
}
 
.mobile-search-overlay input {
    flex: 1;
    padding: 14px 16px;
    font-size: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: #23232c;
    color: white;
    outline: none;
}
 
.mobile-search-overlay input:focus {
    border-color: #a19ce0;
}
 
.mobile-search-overlay input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
 
.mobile-search-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #888;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
}
}


.mobile-search-close:hover {
@keyframes mcc-spin { to { transform: rotate(360deg); } }
    color: white;
    background: rgba(255, 255, 255, 0.1);
}


@media (max-width: 768px) {
@media (max-width: 768px) {
    /* Показуємо кнопку пошуку */
     .player-tabs { margin-top: 16px; margin-bottom: 16px; }
     .mobile-search-btn {
     .player-tab { padding: 10px 16px; font-size: 13px; flex: 1; text-align: center; }
        display: flex;
    }
 
    .heading-holder {
    padding-top: 40px !important;
}
   
    /* Ховаємо стандартну форму пошуку */
    .minerva-header .minerva-search-form {
        display: none !important;
    }
   
    /* Ховаємо стандартну іконку */
     .minerva-header #searchIcon {
        display: none !important;
    }
   
    /* Компактніший хедер */
    .header-container.header-chrome {
        padding: 6px 12px !important;
    }
   
    .minerva-header {
        padding: 4px 0 !important;
        gap: 10px !important;
    }
   
    .minerva-header .branding-box a::before {
        width: 28px !important;
        height: 28px !important;
    }
   
    .minerva-header .branding-box a span {
        font-size: 14px !important;
    }
   
    .mw-body {
        padding-top: 52px !important;
    }
}
 
@media (max-width: 720px) {
    .minerva-header .branding-box a span {
        display: none !important;
    }
 
.content hr {
 
    background-color: #d8b283!important;
    height: 1px!important;
    border: 0!important;
    display: none!important;
 
}
 
 
}
 
 
.content hr {
 
    background-color: #3a3a4a!important;
    height: 2px!important;
    border: 0!important;
 
}
 
.home__block-tournament-winner {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 20px;
    background: rgba(24, 21, 30, 0.3);
    background: rgba(0,0,0,0.5);
}
 
.home__block-tournament-winner span:first-child {
    font-weight: 500;
    color: #fff;
}
 
/* ==================================================== */
/* БЛОКУВАННЯ SEARCH OVERLAY */
/* ==================================================== */
 
/* Фіксуємо scroll */
html {
    overflow-y: scroll !important;
    scrollbar-gutter: stable !important;
}
}


/* Блокуємо зміни body при search overlay */
/* ============================================================
body.overlay-enabled,
   15. STAT PILLS
body.search-enabled {
   ============================================================ */
    overflow: auto !important;
    position: static !important;
    background-color: #15151f !important;
}
 
/* Ховаємо search overlay */
.overlay.search-overlay,
.search-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
 
/* Поле пошуку - завжди активне */
#searchInput {
    pointer-events: auto !important;
    cursor: text !important;
}
 
/* Контент - правильний padding-top */
.mw-body {
    padding-top: 70px !important;
}
 
@media (max-width: 767px) {
    .mw-body {
        padding-top: 60px !important;
    }
}
 
/* ==================================================== */
/* HEADER BANNER - LIQUIPEDIA STYLE */
/* ==================================================== */
 
.header-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    margin-bottom: 20px;
    background-image: url('/images/4/44/Searchbackground.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    position: relative;
    min-height: 80px;
}
 
/* Затемнення для кращої читабельності */
.header-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.5) 100%);
    border-radius: 8px;
    pointer-events: none;
}
 
/* Логотип зліва */
.header-banner__logo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}
 
.header-banner__logo span[typeof="mw:File"],
.header-banner__logo > span:first-child {
    display: flex;
    align-items: center;
}
 
.header-banner__logo > span:last-child {
    font-size: 24px;
    font-weight: 700;
    color: #fff !important;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    white-space: nowrap;
}
 
.header-banner__logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
}
 
.header-banner__logo img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}
 
.header-banner__logo span {
    font-size: 24px;
    font-weight: 700;
    color: #fff !important;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
 
/* Пошук справа */
.header-banner__search {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0;
}
 
.header-banner__search input {
    width: 360px;
    margin-right: 16px;
    padding: 12px 16px;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    background: #fff;
    color: #333;
    outline: none;
}
 
.header-banner__search input::placeholder {
    color: #888;
}
 
.header-banner__search input:focus {
    box-shadow: 0 0 0 2px rgba(161, 156, 224, 0.5);
}
 
.header-banner__search button {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: #3b82f6;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}
 
.header-banner__search button:hover {
    background: #2563eb;
}
 
/* Мобільна версія */
@media (max-width: 768px) {
    .header-banner {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
        text-align: center;
    }
   
    .header-banner__logo span {
        font-size: 18px;
    }
   
    .header-banner__search {
        width: 100%;
    }
   
    .header-banner__search input {
        flex: 1;
        width: auto;
    }
}
 
@media (max-width: 768px) {
    .header-banner__logo > span:last-child {
        font-size: 16px;
        letter-spacing: 0.5px;
    }
}
 
@media (max-width: 480px) {
    .header-banner__logo > span:last-child {
        display: none;
    }
}
 
blockquote {
  border-left: 4px solid #e74c3c;
  border-bottom: 1px solid rgba(231, 76, 60, 0.2);
  padding: 20px 24px;
  font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
  font-size: 20px;
  font-style: italic;
  background: rgba(231, 76, 60, 0.04);
  border-radius: 2px 12px 12px 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
}
 
/* ====================================================
   MCC DESIGN SYSTEM v2 — append to Common.css
  Не замінює старий код, тільки доповнює/перекриває
  ==================================================== */
 
/* ── ШРИФТ ── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');
 
body,
.mw-body,
.content,
.mw-parser-output {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
}
 
/* ── БАЗОВИЙ РОЗМІР ТЕКСТУ В ТАБЛИЦЯХ ── */
.wikitable td,
.wikitable th {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
}
 
/* ── H2 СЕКЦІЇ — БІЛЬШЕ ВІДСТУПУ ── */
.content .mw-parser-output > h2,
.content .section-heading {
    margin-top: 48px !important;
    margin-bottom: 18px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ebebeb !important;
    padding-top: 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #232b3a !important;
}
 
/* ── H4 ПІДЗАГОЛОВКИ ФІНАЛЬНИХ ІГОР ── */
h4 {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: #b7b4bf !important;
    opacity: .45 !important;
    margin: 22px 0 8px !important;
}
 
/* ====================================================
  ТАБЛИЦІ — АНІМАЦІЯ РЯДКІВ (CSS-only)
  ==================================================== */
 
.wikitable tbody tr {
    animation: mcc-row-in 0.32s ease both;
}
 
.wikitable tbody tr:nth-child(1)  { animation-delay: 0.03s; }
.wikitable tbody tr:nth-child(2)  { animation-delay: 0.06s; }
.wikitable tbody tr:nth-child(3)  { animation-delay: 0.09s; }
.wikitable tbody tr:nth-child(4)  { animation-delay: 0.12s; }
.wikitable tbody tr:nth-child(5)  { animation-delay: 0.15s; }
.wikitable tbody tr:nth-child(6)  { animation-delay: 0.18s; }
.wikitable tbody tr:nth-child(7)  { animation-delay: 0.21s; }
.wikitable tbody tr:nth-child(8)  { animation-delay: 0.24s; }
.wikitable tbody tr:nth-child(9)  { animation-delay: 0.27s; }
.wikitable tbody tr:nth-child(10) { animation-delay: 0.30s; }
.wikitable tbody tr:nth-child(n+11) { animation-delay: 0.33s; }
 
@keyframes mcc-row-in {
    from { opacity: 0; transform: translateX(-6px); }
    to  { opacity: 1; transform: translateX(0); }
}
 
/* Re-анімація при сортуванні — клас додається JS */
.wikitable.mcc-sorting tbody tr {
    animation: none;
}
.wikitable.mcc-sorted tbody tr {
    animation: mcc-row-in 0.28s ease both;
}
.wikitable.mcc-sorted tbody tr:nth-child(1)  { animation-delay: 0.02s; }
.wikitable.mcc-sorted tbody tr:nth-child(2)  { animation-delay: 0.04s; }
.wikitable.mcc-sorted tbody tr:nth-child(3)  { animation-delay: 0.06s; }
.wikitable.mcc-sorted tbody tr:nth-child(4)  { animation-delay: 0.08s; }
.wikitable.mcc-sorted tbody tr:nth-child(5)  { animation-delay: 0.10s; }
.wikitable.mcc-sorted tbody tr:nth-child(6)  { animation-delay: 0.12s; }
.wikitable.mcc-sorted tbody tr:nth-child(7)  { animation-delay: 0.14s; }
.wikitable.mcc-sorted tbody tr:nth-child(8)  { animation-delay: 0.16s; }
.wikitable.mcc-sorted tbody tr:nth-child(9)  { animation-delay: 0.18s; }
.wikitable.mcc-sorted tbody tr:nth-child(10) { animation-delay: 0.20s; }
.wikitable.mcc-sorted tbody tr:nth-child(n+11) { animation-delay: 0.22s; }
 
/* ====================================================
   SORTABLE — ФІКС ПРАВОГО ВИРІВНЮВАННЯ
  ==================================================== */
 
/* Стрілка не накладається на число у right-aligned колонках */
.jquery-tablesorter th.headerSort {
    padding-right: 22px !important;
}
 
.jquery-tablesorter th.headerSort::after {
    right: 6px !important;
}
 
/* ====================================================
  ГОРИЗОНТАЛЬНИЙ СКРОЛ ДЛЯ ШИРОКИХ ТАБЛИЦЬ
  Обгортка додається JS — .mcc-scroll-outer
  ==================================================== */
 
.mcc-scroll-outer {
    position: relative;
    margin-bottom: 0;
}
 
/* Градієнт-підказка що таблиця ширша */
.mcc-scroll-outer::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, rgba(21,21,31,0.90));
    pointer-events: none;
    transition: opacity 0.25s;
    border-radius: 0 6px 6px 0;
}
 
.mcc-scroll-outer.mcc-no-fade::after {
    opacity: 0;
}
 
.mcc-scroll-inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
 
/* Мінімальна ширина для широкого "Запис ігор" */
.mcc-wide-table {
    min-width: 860px;
}
 
/* ====================================================
  PLAYER TABS — фікс активного підкреслення
  (без фону, тільки border-bottom)
  ==================================================== */
 
.player-tab.active {
    color: #fff !important;
    border-bottom-color: #a19ce0 !important;
    background: transparent !important;    /* прибираємо фон */
}
 
.player-tab:hover {
    background: rgba(255,255,255,0.04) !important;
}
 
/* ====================================================
  STAT PILLS — рядок статистики сезону
  ==================================================== */


.mcc-stat-row {
.mcc-stat-row {
Рядок 1828: Рядок 1024:
}
}


/* ====================================================
/* ============================================================
   САЙДБАР BADGES — пастельний помаранчевий
   16. КНОПКА ЗАПИСУ ГРИ
   ==================================================== */
   ============================================================ */
 
.game-record-btn {
    display: inline-block;
    padding: 3px 9px;
    background-color: rgba(208,47,47,0.18);
    color: #e08080;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    transition: background-color 0.15s;
    border: 1px solid rgba(208,47,47,0.25);
}
 
.game-record-btn:hover { background-color: rgba(208,47,47,0.35); opacity: 1; }
.game-record-btn a { color: #e08080 !important; text-decoration: none !important; }


.l-box-item .mcc-badge {
/* ============================================================
     margin-left: auto;
  17. PROFILE LINKS — 4 квадрати
     background: rgba(210,130,60,0.18);
  ============================================================ */
     border-radius: 20px;
 
    padding: 1px 7px;
.profile-links {
    font-size: 10.5px;
     margin-top: 0;
    color: #d4895a;
     padding: 0;
    font-weight: 600;
     border-top: 1px solid rgba(255,255,255,0.06);
}
}


/* ====================================================
.profile-links-title { display: none; }
  PROFILE LINKS — 4 рівних квадрати
  ==================================================== */


.profile-links-icons {
.profile-links-icons {
Рядок 1853: Рядок 1063:


.profile-icon {
.profile-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
     padding: 14px 8px !important;
     padding: 14px 8px !important;
     border-right: 1px solid rgba(255,255,255,0.07);
     border-right: 1px solid rgba(255,255,255,0.07);
     background: rgba(24,21,30,0.4);
     background: rgba(24,21,30,0.4);
     transition: background .14s;
     transition: background 0.14s;
     justify-content: center !important;
     cursor: pointer;
}
 
.profile-icon:last-child {
    border-right: none;
}
}


.profile-icon:hover {
.profile-icon:last-child { border-right: none; }
    background: #373752;
.profile-icon:hover { background: #373752; }
}


.profile-icon img {
.profile-icon img {
    display: block !important;
     width: 26px !important;
     width: 26px !important;
     height: 26px !important;
     height: 26px !important;
Рядок 1874: Рядок 1083:
}
}


/* Неактивний — чб + 30% */
/* Неактивний */
.profile-icon.inactive {
.profile-icon.inactive {
     opacity: 0.28;
     opacity: 0.28;
     pointer-events: none;
     pointer-events: none;
    cursor: default;
}
}


.profile-icon.inactive img {
.profile-icon.inactive img { filter: grayscale(100%); }
    filter: grayscale(100%);
}


/* ====================================================
/* ============================================================
   GAME RECORD BUTTON — тонший
   18. МОБІЛЬНИЙ ПОШУК
   ==================================================== */
   ============================================================ */


.game-record-btn {
.mobile-search-btn {
     padding: 3px 9px !important;
     display: none;
     font-size: 12px !important;
     align-items: center; justify-content: center;
     border-radius: 4px !important;
     width: 36px; height: 36px;
     border: 1px solid rgba(208,47,47,0.25) !important;
     background: rgba(255,255,255,0.10);
     background-color: rgba(208,47,47,0.18) !important;
     border-radius: 8px;
     color: #e08080 !important;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
     transition: background 0.2s;
}
}


.game-record-btn:hover {
.mobile-search-btn:hover { background: rgba(255,255,255,0.20); }
    background-color: rgba(208,47,47,0.35) !important;
.mobile-search-btn svg { display: block; }
    opacity: 1 !important;
}


.game-record-btn a {
.mobile-search-overlay {
     color: #e08080 !important;
     display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1001;
    background: rgba(21,21,31,0.98);
    padding: 12px;
    align-items: flex-start;
    gap: 10px;
}
}


/* ====================================================
.mobile-search-overlay.active { display: flex; }
  R-BOX — покращений вигляд правої панелі
  ==================================================== */


.r-box,
.mobile-search-overlay input {
.tournament-box,
    flex: 1;
.series-box {
     padding: 14px 16px;
     border: 1px solid #232b3a !important;
     font-size: 16px;
     border-radius: 8px !important;
     font-family: 'Manrope', sans-serif;
     overflow: hidden !important;
     border: 1px solid rgba(255,255,255,0.15);
     background: rgba(24,21,30,0.6) !important;
    border-radius: 10px;
    background: #23232c;
    color: white;
    outline: none;
}
}


/* Рядки інформації в r-box */
.mobile-search-overlay input:focus { border-color: #a19ce0; }
.r-box table td,
.mobile-search-overlay input::placeholder { color: rgba(255,255,255,0.4); }
.tournament-box table td {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding: 9px 13px !important;
    font-size: 13px !important;
}


/* Champion banner всередині r-box */
.mobile-search-close {
.r-box .rp-champion,
    width: 44px; height: 44px;
.tournament-box .rp-champion {
    display: flex; align-items: center; justify-content: center;
     border: 1px solid rgba(255,215,0,0.18);
    font-size: 28px; color: #888;
     border-radius: 6px;
     cursor: pointer; flex-shrink: 0;
     background: rgba(255,215,0,0.05);
     border-radius: 10px;
    padding: 12px 14px;
     background: rgba(255,255,255,0.05);
    text-align: center;
    margin: 12px;
}
}


/* ====================================================
.mobile-search-close:hover { color: white; background: rgba(255,255,255,0.10); }
  ВІНРЕЙТ КОЛІР В ТАБЛИЦЯХ
  ==================================================== */


.wr-hi { color: #5aaa80 !important; }
/* ============================================================
.wr-lo { color: #c06070 !important; }
  19. ГОЛОВНА СТОРІНКА — БЛОКИ
  ============================================================ */


/* ====================================================
.flex__block { display: flex; justify-content: space-between; align-items: center; }
  ЦІКАВІ ФАКТИ — список без зайвих відступів
  ==================================================== */


.mcc-facts-list {
.home__blocks { gap: 20px; align-items: stretch; margin-bottom: 20px; }
    list-style: none !important;
    padding: 0 !important;
    max-width: 820px;
}


.mcc-facts-list li {
.home__block { align-items: stretch; width: 33.3333%; flex-direction: column; }
    display: flex;
    gap: 10px;
    padding: 8px 0;
    font-size: 14.5px;
    line-height: 1.75;
    color: #b7b4bf;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}


.mcc-facts-list li::before {
.home__block-inner {
     content: '—';
     align-items: stretch; gap: 0; flex-direction: column;
    color: #a19ce0;
     flex-grow: 0; border: 1px solid rgba(255,255,255,0.10);
    opacity: .5;
     flex-shrink: 0;
}
}


.mcc-facts-list li:last-child {
.home__block-image-block {
     border-bottom: none !important;
    flex-direction: column; border-radius: 0;
    background-image: url(https://mafiacc.site/images/d/df/Bg_03.png);
     background-size: cover;
}
}


/* ====================================================
.home__block-image { text-align: center; padding-top: 20px; }
  МОБІЛЬНА АДАПТАЦІЯ ТАБЛИЦЬ
  ==================================================== */


@media (max-width: 768px) {
.home__block-icon {
     /* scroll-hint підказка */
     width: 96px; height: 96px; display: inline-block;
    .mcc-scroll-hint {
     background-position: center; background-size: contain; background-repeat: no-repeat;
        font-size: 11.5px;
        color: #b7b4bf;
        opacity: .4;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 5px;
     }
 
    /* Компактніші stat pills */
    .mcc-stat-pill {
        padding: 6px 11px;
    }
 
    .mcc-stat-pill-lbl {
        font-size: 10px;
    }
 
    .mcc-stat-pill-val {
        font-size: 13px;
    }
}
}


/* ====================================================
.home__block-icon-1 { background-image: url(https://mafiacc.site/images/d/dc/Block_01.png); }
  ДОДАТОК ДО common_css_addition.css
.home__block-icon-2 { background-image: url(https://mafiacc.site/images/5/5f/Block_02.png); }
  Стилі для оновлених Template:Tournament + r-box
.home__block-icon-3 { background-image: url(https://mafiacc.site/images/0/00/Block_03.png); }
  ==================================================== */


/* ── R-BOX / TOURNAMENT-BOX — прибираємо inline styles ── */
.home__block-content { flex-grow: 0; flex-direction: column; align-items: stretch; }
.r-box,
.tournament-box,
.series-box {
    position: fixed !important;
    top: 80px !important;
    right: 20px !important;
    z-index: 100 !important;
    width: 300px !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;


    background: rgba(24,21,30,0.85) !important;
.home__block-content-inner {
     backdrop-filter: blur(10px) !important;
     border-radius: 0; background: none;
    -webkit-backdrop-filter: blur(10px) !important;
     padding: 20px 20px 0; flex-grow: 0;
     border: 1px solid #232b3a !important;
    border-radius: 10px !important;
    padding: 0 !important; /* padding тепер всередині компонентів */
}
}


/* Фото у r-box */
.home__block-content-title { line-height: 1; padding-bottom: 10px; }
.r-box figure,
.home__block-content-inner pre { font-family: 'Manrope', sans-serif !important; padding: 0 !important; display: block !important; }
.tournament-box figure,
.home__block-content-title .content p { margin: 0 !important; }
.series-box figure {
    margin: 0 !important;
    display: block !important;
}


.r-box figure img,
.home__block-tournament-winner {
.tournament-box figure img,
     border-bottom: 1px solid rgba(255,255,255,0.10);
.series-box figure img {
     padding: 15px 20px;
     width: 100% !important;
     background: rgba(0,0,0,0.5);
    height: 180px !important;
    object-fit: cover !important;
     object-position: top center !important;
     display: block !important;
    border-radius: 0 !important;
}
}


/* Champion banner */
.home__block-tournament-winner span:first-child { font-weight: 500; color: #fff; }
.rp-champion {
    border: 1px solid rgba(255,215,0,0.18);
    border-radius: 6px;
    background: rgba(255,215,0,0.05);
    padding: 12px 14px;
    text-align: center;
    margin: 12px;
}


.rp-ch-lbl {
@media (max-width: 768px) {
     font-size: 9.5px;
     .home__blocks { display: block; padding-top: 10px; }
    font-weight: 700;
     .home__block-content-title { padding-bottom: 10px; }
     letter-spacing: .13em;
     .home__block { width: 100%; }
    text-transform: uppercase;
     .home__block-content-inner { margin-bottom: 10px; }
     color: #c8a840;
     opacity: .8;
    margin-bottom: 3px;
}
}


.rp-ch-name {
/* ============================================================
    font-size: 17px;
  20. ГЕРОЇ — ГОЛОВНА СТОРІНКА
    font-weight: 800;
  ============================================================ */
    color: #ffd700;
    font-family: 'Manrope', sans-serif;
}


/* Info table всередині r-box */
.mcc-heroes-list {
.r-box-info-table {
     padding-top: 20px !important;
     width: 100% !important;
     display: flex; flex-wrap: wrap; gap: 8px;
     border-collapse: collapse !important;
     list-style: none; padding: 0; margin: 0;
    margin: 0 !important;
     background: none !important;
    text-align: left !important;
}
 
.r-box-info-table tr {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
}


.r-box-info-table tr:last-child {
.mcc-heroes-list li { margin: 0; padding: 0; width: calc((100% - 32px) / 5); }
    border-bottom: none !important;
}


.r-box-info-table th,
.mcc-hero-card {
.r-box-info-table td {
     position: relative; display: block; width: 100%;
     padding: 8px 14px !important;
     border-radius: 0; overflow: hidden; background: #1a1a2e;
     font-size: 12.5px !important;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: none !important;
    border: none !important;
     border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
}


.r-box-info-table th {
.mcc-hero-card:hover {
     font-weight: 500 !important;
     transform: translateY(-4px);
    color: #b7b4bf !important;
     box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    opacity: .55 !important;
    text-transform: none !important;
     letter-spacing: 0 !important;
    text-align: left !important;
    width: 50% !important;
}
}


.r-box-info-table td {
.mcc-hero-card .hero-image-wiki,
    text-align: right !important;
.mcc-hero-card .hero-image-wiki img,
    color: #ebebeb !important;
.mcc-hero-card .mw-file-element,
     font-weight: 600 !important;
.mcc-hero-card a.mw-file-description {
    width: 50% !important;
     display: block; width: 100%; height: auto;
}
}


.r-box-gold {
.mcc-hero-info {
     color: #c8a840 !important;
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 30px 12px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
     color: #fff;
}
}


/* Nav всередині r-box */
.mcc-hero-nickname {
.tournament-nav,
     font-weight: 700; font-size: 1.1em; font-family: 'Manrope', sans-serif;
.series-nav,
.player-nav,
.championship-nav {
     background: rgba(18,15,24,0.9) !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #232b3a !important;
    margin-bottom: 0 !important;
    padding: 12px 14px !important;
}
}


.tournament-nav-name,
.mcc-hero-nickname a,
.series-nav-name,
.mcc-hero-nickname a:visited { color: #fff !important; text-decoration: none; }
.player-nav-name,
.mcc-hero-nickname a:hover { text-decoration: underline; color: #fff !important; }
.championship-nav-name {
.mcc-hero-nickname a.external::after,
    font-size: 14px !important;
.mcc-hero-nickname a.extiw::after { content: none !important; display: none !important; }
    font-family: 'Manrope', sans-serif !important;
}


/* ── L-BOX — mcc-badge позиціонування ── */
.mcc-hero-role { color: #ffd700; font-size: 0.85em; font-weight: 600; }
.l-box-item {
.mcc-hero-date { font-size: 0.85em; opacity: 0.7; }
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}


.l-box-item span:first-child {
.mcc-champion-card { box-shadow: 0 0 0 0.5px orange; }
    flex: 1;
.mcc-champion-card:hover { box-shadow: 0 0 0 1px #ffd700, 0 8px 24px rgba(0,0,0,0.4); }
}


.mcc-badge {
@media (max-width: 768px) {
     background: rgba(210,130,60,0.18);
    .mcc-heroes-list { gap: 12px; }
     border-radius: 20px;
     .mcc-heroes-list li { width: calc((100% - 12px) / 2); }
    padding: 1px 7px;
     .mcc-hero-info { padding: 30px 8px 8px; }
     font-size: 10.5px;
     .mcc-hero-nickname { font-size: 1em; }
    color: #d4895a;
     .mcc-hero-date { font-size: 0.75em; }
     font-weight: 700;
    flex-shrink: 0;
    margin-left: 6px;
}
}


/* ── R-BOX МОБІЛЬНА ВЕРСІЯ ── */
@media (max-width: 360px) {
@media (max-width: 1200px) {
     .mcc-heroes-list li { width: calc((100% - 8px) / 2); }
     .r-box,
    .mcc-hero-nickname { font-size: 0.9em; }
    .tournament-box,
    .series-box {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 20px 0 !important;
        top: auto !important;
        right: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        border-radius: 8px !important;
    }
}
}


/* ====================================================
/* ============================================================
   FIX PART 3 — append to Common.css
   21. РІЗНЕ
   ==================================================== */
   ============================================================ */


/* ── ТАБЛИЦІ — посилена специфічність ── */
.content ul { list-style-type: none !important; padding-left: 0 !important; }
 
.list-thumb.list-thumb-none { background-color: #18151e !important; }
/* Заголовки */
.page-list li, .topic-title-list li, .site-link-list li {
.content .mw-parser-output .wikitable > thead > tr > th,
     border-bottom: 0.2px solid rgba(255,255,255,0.07) !important;
.content .mw-parser-output .wikitable > * > tr:first-child > th,
.client-js .sortable th.headerSort,
.jquery-tablesorter th.headerSort {
    background-color: rgba(24,21,30,0.82) !important;
    color: #e8e6df !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    padding: 11px 14px !important;
     border-bottom: 2px solid rgba(161,156,224,0.22) !important;
    white-space: nowrap !important;
    position: relative !important;
}
}
 
li.gallerybox div.thumb { background-color: #18151e !important; border: none !important; }
/* Hover на заголовок */
.content kbd, .content samp, .content code, .content pre { border: none !important; }
.client-js .sortable th.headerSort:hover,
.content pre { padding: 10px 0 !important; }
.jquery-tablesorter th.headerSort:hover {
.mw-ui-icon-mf-expand { background-image: none !important; }
     background-color: rgba(25,87,255,0.28) !important;
.mw-ui-icon-mf-expand:before {
     transition: background-color 0.15s ease !important;
     content: "+"; color: white; font-size: 16px; font-weight: bold;
    display: inline-block; width: 16px; height: 16px;
     line-height: 1em; text-align: center; vertical-align: middle;
}
}
 
.mf-icon, .mf-icon--small, .mf-icon--large {
/* Стрілки сортування */
     display: inline-flex; align-items: center; justify-content: center;
.jquery-tablesorter th.headerSort::after,
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable)::after {
     content: "⇅" !important;
    position: absolute !important;
    right: 7px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 11px !important;
    color: rgba(255,255,255,0.22) !important;
    font-weight: 400 !important;
}
}
.mf-mw-ui-icon-rotate-flip { transform: rotate(45deg) !important; }


.jquery-tablesorter th.headerSortUp::after {
@media (max-width: 994px) { .harley { display: none; } }
    content: "▲" !important;
    color: #a19ce0 !important;
    font-size: 11px !important;
}


.jquery-tablesorter th.headerSortDown::after {
@media (max-width: 720px) {
     content: "▼" !important;
     .r-box { float: none !important; margin-left: 0 !important; }
    color: #a19ce0 !important;
     .content table { display: table !important; }
     font-size: 11px !important;
}
}


/* Фікс: right-aligned th — стрілка не перекриває текст */
/* Header banner */
.jquery-tablesorter th.headerSort {
.header-banner {
     padding-right: 22px !important;
    display: flex; align-items: center; justify-content: space-between;
     padding: 20px 30px; margin-bottom: 20px;
    background-image: url('/images/4/44/Searchbackground.png');
    background-size: cover; background-position: center;
    border-radius: 8px; position: relative; min-height: 80px;
}
}


/* Рядки */
.header-banner::before {
.content .mw-parser-output .wikitable > tbody > tr:nth-child(odd) > td {
    content: ''; position: absolute; inset: 0;
     background-color: rgba(24,21,30,0.32) !important;
     background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.5) 100%);
     font-family: 'Manrope', sans-serif !important;
     border-radius: 8px; pointer-events: none;
    font-size: 14px !important;
    padding: 10px 14px !important;
}
}


.content .mw-parser-output .wikitable > tbody > tr:nth-child(even) > td {
.header-banner__logo {
     background-color: rgba(24,21,30,0.55) !important;
     position: relative; z-index: 1;
     font-family: 'Manrope', sans-serif !important;
     display: flex; align-items: center; gap: 12px;
    font-size: 14px !important;
    padding: 10px 14px !important;
}
}


.content .mw-parser-output .wikitable > tbody > tr > td {
.header-banner__logo img { width: 50px; height: 50px; object-fit: contain; }
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    vertical-align: middle !important;
    color: #b7b4bf !important;
}


/* Hover рядка */
.header-banner__logo > span:last-child {
.content .mw-parser-output .wikitable > tbody > tr:hover > td {
     font-size: 24px; font-weight: 700; color: #fff !important;
     background-color: rgba(25,87,255,0.12) !important;
    letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); white-space: nowrap;
     transition: background-color 0.12s ease !important;
     font-family: 'Manrope', sans-serif;
}
}


/* Останній рядок без border */
.header-banner__logo a { display: flex; align-items: center; gap: 12px; text-decoration: none !important; }
.content .mw-parser-output .wikitable > tbody > tr:last-child > td {
    border-bottom: none !important;
}


/* Посилання в таблицях — не успадковують фіолетовий */
.header-banner__search { position: relative; z-index: 1; display: flex; }
.content .mw-parser-output .wikitable td a {
    color: #a19ce0 !important;
    font-weight: 500 !important;
}


.content .mw-parser-output .wikitable td a:hover {
.header-banner__search input {
     text-decoration: underline !important;
    width: 360px; margin-right: 16px;
     color: #c4bfff !important;
     padding: 12px 16px; font-size: 14px; font-family: 'Manrope', sans-serif;
     border: none; border-radius: 6px; background: #fff; color: #333; outline: none;
}
}


/* ── L-BOX — active state через CSS scroll-driven ── */
.header-banner__search input:focus { box-shadow: 0 0 0 2px rgba(161,156,224,0.5); }


/* Базовий стан */
.header-banner__search button {
.l-box-item {
     padding: 12px 20px; font-size: 14px; font-weight: 600;
     display: flex !important;
     font-family: 'Manrope', sans-serif;
    align-items: center !important;
     border: none; border-radius: 6px; background: #3b82f6; color: #fff;
    padding: 10px 20px !important;
     cursor: pointer; transition: background 0.2s;
     border-bottom: 1px solid rgba(255,255,255,0.05) !important;
     border-left: 3px solid transparent !important;
    color: #8ab4f8 !important;
     cursor: pointer !important;
    transition: all 0.14s !important;
    font-size: 13.5px !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 500 !important;
}
}


.l-box-item:hover {
.header-banner__search button:hover { background: #2563eb; }
    background: #373752 !important;
    border-left-color: #555 !important;
    color: #fff !important;
}


.l-box-item.active {
@media (max-width: 768px) {
     background: #373752 !important;
     .header-banner { flex-direction: column; gap: 16px; padding: 20px; text-align: center; }
     border-left-color: #8ab4f8 !important;
     .header-banner__search { width: 100%; }
     color: #fff !important;
     .header-banner__search input { flex: 1; width: auto; margin-right: 0; }
     font-weight: 600 !important;
     .header-banner__logo > span:last-child { font-size: 16px; }
}
}


.l-box-item-last {
@media (max-width: 480px) {
     border-bottom: none !important;
     .header-banner__logo > span:last-child { display: none; }
}
 
/* ── СЕКЦІЇ — потрібен scroll-margin щоб не ховалось під заголовок ── */
.mw-parser-output h2,
.mw-parser-output .mw-headline {
    scroll-margin-top: 80px !important;
}
}
Отримано з https://mafiacc.site/index.php/Спеціальна:Мобільна_різниця_версій/6261