/* matches/archive.css */

/* Заголовки */
h1,h2,h3 { color:#eee; margin-bottom:10px; }

/* Таблицы */
table { width:100%; border-collapse: collapse; margin-bottom: 25px; }
th, td { padding: 8px 12px; text-align: left}

th {
    background-color: #296AD6;
    color:#fff;
}
tr {
    border-bottom: 1px solid #333;
}

tr:last-child {
    border-bottom: none;
}
tr:hover { background-color: #2e2e44; }

.container3, .container4 {
    margin-top: 50px;
}

h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 30px;
}

.container_main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    height: 70vh;
}

.main_title_and_description {

}

.main_title {
    font-size: 68px;
    color: #296AD6;
}

.main_slogan {
    font-size: 28px;
    font-weight: bold;
}

.main_description {
    margin-top: 20px;
}

.main_img {
    width: 100%;
    height: 100%;
}



.container2_title {
}



/* Прогресс-бары популярности */
.popularity-bar { width:100%; background:#333; border-radius:4px; height:10px; margin-bottom:4px; }
.bar-fill { height:10px; background:#bbb; border-radius:4px 4px 4px 4px; }

/* Цветные точки */
.dot-matches, .dot-wins { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.dot-matches { background-color:#0790F3; }
.dot-wins { background-color:#10b981; }

/* Тир-лист */
.tier-table tr { padding:6px 10px; border:1px solid #333;}
.tier-table td {
    height: 67px;
    color: #000;
    font-weight: 600;
}
.tier-table td:first-child {
    padding: 0 25px;
}
.tier-table tr.S td:first-child {background: #FC8080;}
.tier-table tr.A td:first-child {background: #FFC080;}
.tier-table tr.B td:first-child {background: #FFFF7A;}
.tier-table tr.C td:first-child {background: #81FB82;}
.tier-table tr.D td:first-child {background: #7DFFFF;}
.tier-table tr.E td:first-child {background: #7F80FE;}
.tier-table tr.F td:first-child {background: #FF7FFB;}
.tier-table .tier-images { font-size: 0;}
.tier-table img {
    width: 55px;
    height: 55px;
}

/* Селекты */
/*select { padding:5px 10px; margin:10px 5px 20px 0; border-radius:4px; border:1px solid #555; background:#1e1e2f; color:#eee; }*/
.container4 .select_container {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

.container4 label {
    color: #ddd;
    font-size: 15px;
    font-weight: 500;
    margin-right: 10px;
}

.container4 select {
    background: #1f1f1f;
    color: #e5e5e5;
    border: 1px solid #333;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s ease;
    min-width: 180px;
    margin-right: 20px;
}

.container4 select:hover {
    border-color: #4b6fff;
}

.container4 select:focus {
    outline: none;
    border-color: #6c8aff;
    box-shadow: 0 0 4px #6c8aff80;
}

.container4 select option {
    background: #1f1f1f;
    color: #e5e5e5;
}

/* Адаптив под мобильные */
@media (max-width: 600px) {
    .container4 {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .container4 label {
        margin: 0;
    }

    .container4 select {
        width: 100%;
        margin: 0;
    }
}


/* Сетка режимов */
.modes-container { display:grid; gap:15px; margin:20px 0; }
@media (min-width:1300px){ .modes-container { grid-template-columns: repeat(6,1fr); } }
@media (min-width:900px) and (max-width:1299px){ .modes-container { grid-template-columns: repeat(3,1fr); } }
@media (min-width:600px) and (max-width:899px){ .modes-container { grid-template-columns: repeat(2,1fr); } }
@media (max-width:599px){ .modes-container { grid-template-columns: 1fr; } }

/* Плашки режима */
.mode-card {
    background-color:var(--secondary-color);
    border-radius:8px;
    padding:15px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}
.mode-card h3 { margin:0; font-size:1.1rem; text-align:center; color:#10b981; }
.brawler-row { display:flex; justify-content:space-between; width:100%; margin-bottom:6px; }
.brawler-row img { width:40px; height:40px; }
.brawler-stats { display:flex; flex-direction:column; text-align:center; font-size:14px; color:#eee; }