@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
:root {
	--null-color: rgb(40, 40, 40);
    --first-color: rgb(30, 30, 30);
    --second-color: rgb(140, 0, 255);
    --third-color: rgb(20, 20, 20);
	--a-color: rgb(210, 150, 255);
}

body {
	position: relative;
	margin: 0 auto;
    padding: 0;
	width: 100%;
    height: 100%;
    color: white;
	background-color: var(--null-color);
    font-family: 'Montserrat', sans-serif;
}


.z { font-size: 50px; font-weight: bold; }
.p { width: 1300px; font-size: 40px; font-weight: bold; }
.t { width: 1300px; font-size: 30px; color: #e0e0e0; }
.z-z { font-size: 40px; font-weight: bold; }
.p-p { width: 1300px; font-size: 30px; font-weight: bold; }
.t-t { width: 1300px; font-size: 20px; color: #e0e0e0; }
.t-w { color: white; font-weight: bold; }

.t-tm { width: 700px; font-size: 20px; color: #e0e0e0; }
.p-pm { width: 700px; font-size: 30px; font-weight: bold; }

.top_z { margin: 50px 370px; }
.top_t { margin: 40px auto 0 auto; }

.mid_z { margin: 50px 175px; }
.mid_p { margin: 40px auto; }
.mid_t { margin: 30px auto 0 auto; }

.bot_z { margin: -10px 395px 30px 395px; }
.bot_p { margin: 30px auto 0 auto; }
.bot_t { margin: 30px auto 0 auto; }

.who-he { margin: 50px 350px; }
.team-best { margin: 50px 270px; }
.feedback { margin: 50px 470px; }
.highlite-com { margin: 50px 268px; }


.wave-left {
    position: absolute; /* Волна зафиксирована слева */
    top: 0;
    left: 0;
    height: 3650px;   /* Растягиваем на всю высоту экрана */
    width: 200px;    /* Ширина волнистой полосы (можешь менять) */
    z-index: -1;     /* Уводим под контент */
}

.wave-right {
    position: absolute;
    top: 0;
    right: 0;        /* Прижимаем вправо */
    height: 3650px;
    width: 200px;    /* Ширина полоски */
    z-index: -1;
    
    /* Отражаем по горизонтали, чтобы волны смотрели внутрь */
    transform: scaleX(-1); 
}

.w-major { height: 5850px; }
.w-best { height: 3140px; }
.w-kontakt { height: 3140px; }
.w-highlite { height: 3850px; }
.w-highlite-player { height: 3240px; }

.wave-bottom {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

.header {
	position: sticky;
	top: 0;
	margin: 0 auto;
	height: 335px;
	width: 1400px;
	background-color: rgba(30, 30, 30, 0.4);
	backdrop-filter: blur(10px);
	z-index: 110;
	/*border: 1px solid var(--second-color);*/
	border-top: 0;
	border-radius: 0 0 20px 20px;
	transition: 0.4s;
}
.header:hover {
	scale: 1.005;
	border: 0;
	box-shadow: 0 0 50px 5px var(--second-color);
}

.name {
	margin: 0 0 74px 0;
	padding: 0;
}

.logo img {
	width: 130px;
	height: 130px;
	float: left;
	margin: 44px 0 0 70px;
	border: 0;
	
	padding-left: 25px;
	transition: 0.3s;
	/* border: 1px solid aqua; */
}
.logo img:hover { scale: 1.05; }

.name_site h4 {
	color: rgb(250, 220, 50);
	height:80px;
	width:200px;
	margin: 0;
	padding: 65px 0 0 1150px;
	font-size: 65px;
	transition: 0.3s;
}

.menu_blob {
    position: absolute;
    width: 350px;
    height: 350px;
	transform: rotate(180deg);
    
    left: 300px;    
    top: -160px;     
    
    z-index: 0;
}
/*
/\
	Меню начало
\/
*/
.menu {
	background-color: var(--first-color);
	backdrop-filter: blur(10px);
	padding: 20px 0;
	position: relative; /* Важно для позиционирования подменю */
	z-index: 110; /* Гарантируем, что меню будет поверх других элементов*/
	border-top: 3px solid var(--third-color);
	border-radius: 0 0 25px 25px;
}

.menu ul {
	list-style: none;
	margin: 0;
	padding: 10px 0;
	text-align: center;
}

.menu ul li {
	display: inline-block;
	margin: 0 15px;
	position: relative; /* Важно для позиционирования выпадающего меню относительно родителя */
}

.menu ul li a {
	color: white;
	text-decoration: none;
	padding: 8px 13px;
	display: block;
	transition: background-color 0.3s ease;
	border-radius: 5px;
	font-size: 30px;
}

.menu ul li a:hover {
	background-color: #555;
}

.submenu {
	display: none; /* Изначально скрываем подменю */
	position: absolute; /* Позиционируем абсолютно относительно родительского <li> */
	background-color: #444; /* Темнее фон для подменю */
	min-width: 160px; /* Минимальная ширина подменю */
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Легкая тень для объема z-index: 1; * Убедимся, что подменю находится над основным контентом */
	text-align: left; /* Выравнивание текста в подменю по левому краю */
	border-radius: 0 0 5px 5px; /* Скругляем нижние углы */
	overflow: hidden; /* Обрезаем контент, если выходит за границы */
	z-index: 110;
}


.submenu li {
	display: block; /* Элементы подменю располагаются вертикально */
	margin: 0; /* Убираем горизонтальные отступы */
}

.submenu li a {
	color: white;
	padding: 12px 6px 12px 12px;
	text-decoration: none;
	display: block;
	text-align: left; /* Выравнивание текста по левому краю */
}

.submenu li a:hover {
	background-color: #666; /* Более светлый фон при наведении */
	border-radius: 0; /* Убираем скругление углов */
}

.menu ul li:hover > .submenu {
	display: block; /* Делаем подменю видимым */
}
/*
/\
	Меню конец
\/
*/
.site {
	display: flex;
    position: relative;
	flex-direction: column;
	height: 3020px;
	width: 1400px;
	margin: 60px auto;
	background: var(--first-color);
	/*border: 1px solid var(--second-color);*/
	border-radius: 20px;
	transition: 0.4s;
	z-index: 100;
}
.site:hover {
	scale: 1.005;
	border: 0;
	box-shadow: 0 0 50px 5px var(--second-color);
}
.s-best { height: 2500px; }
.s-major { height: 5200px; }
.s-kontakt { height: 2500px; }
.s-highlite { height: 3170px; }
.s-highlite-player { height: 2560px; }

.top {
	position: relative;
	width: 1400px;
}

.top_blob {
    position: absolute;
    width: 220px;
    height: 220px;
	transform: rotate(190deg);
    
    left: 40px;
    top: 30px;
    
    z-index: 0;
}


.cbs {
	height: 150px;
	width: 150px;
	margin: -120px 0 0 1150px;
}
.cbs img {
	height: 150px;
	width: 150px;
	border-radius: 10px;
	transform: rotate(5deg);
	box-shadow: 0 0 20px 0.5px white;
	transition: 0.3s;
}
.cbs img:hover { scale: 1.1; }


.highl img {
    margin: 40px 50px;
	height: 750px;
	width: 1200px;
}

.maj img {
	margin: 40px 50px;
	height: 530px;
	width: 1200px;
}

.player-b1t img {
	margin: 40px 100px;
	height: 600px;
	width: 1100px;
}
.player-s1mple img {
	margin: 40px 100px;
	height: 750px;
	width: 1100px;
}
.player-electronic img {
	margin: 40px 140px;
	height: 530px;
	width: 1000px;
}
.player-perfecto img {
	margin: 40px 125px;
	height: 580px;
	width: 1050px;
}


.mid_r-l { height: 480px; width: 1300px; }
.mid-l { float: left; width: 580px; }
.mid-r { float: right; width: 720px; }
.mid-r img { height: 470px; width: 730px; }


.dota {
	float: left;
	height: 200px;
	width: 200px;
	margin: 35px 0 0 170px;
	transform: rotate(-5deg);
}
.dota img {
	height: 200px;
	width: 200px;
	transition: 0.3s;
}
.dota img:hover { scale: 1.1; }


.apex {
	height: 200px;
	width: 200px;
	margin: 50px 0 0 550px;
	transform: rotate(4deg);
}
.apex img {
	height: 100px;
	width: 250px;
	transition: 0.3s;
}
.apex img:hover { scale: 1.1; }


.cs {
	float: right;
	height: 100px;
	width: 250px;
	margin: -80px 140px 0 0;
	transform: rotate(10deg);
}
.cs img {
	height: 100px;
	width: 250px;
	transition: 0.3s;
}
.cs img:hover { scale: 1.1; }


.lvl {
	position: inline-block;
	float: right;
	height: 100px;
	width: 100px;
	margin: -20px -190px 0 0;
	transform: rotate(15deg);
}
.lvl img {
	height: 100px;
	width: 100px;
	transition: 0.3s;
}
.lvl img:hover { scale: 1.1; }




.table_container {
    width: 1300px;
    margin: 20px auto 50px auto;
    background-color: var(--third-color); /* Используем твой самый темный цвет */
    border-radius: 15px;
    padding: 20px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.stats_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 20px;
    color: #e0e0e0;
}

.stats_table th {
    text-align: left;
    padding: 15px;
    color: #888;
    border-bottom: 1px solid #444;
    font-size: 18px;
}

.stats_table td {
    padding: 15px;
    border-bottom: 1px solid #333;
    vertical-align: middle;
}

.stats_table a {
    color: #e0e0e0;
	text-decoration: none;
    transition: 0.2s;
}
.stats_table a:hover { color: white; }

.stats_table tr:last-child td { border-bottom: 0; }

/* Стили для тегов Mobile / PC */
.tag {
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
}

.mobile {
    background-color: rgba(0, 200, 100, 0.2);
    color: #00ff88;
}

.pc {
    background-color: rgba(140, 0, 255, 0.2); /* Твой фиолетовый */
    color: var(--a-color);
}

.mini-logo {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 10px;
}

/* Выделение при наведении на строку */
.stats_table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
    transition: 0.2s;
}

.footer {
    position: relative; /* База для позиционирования */
    margin: -200px 0 0 0;
    z-index: 1;
}

.footer-container {
    position: relative;
    width: 100%;
}

.info {
    display: inline-block;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 1300px;
    z-index: 101;
    pointer-events: auto;
}

.info span {
    color: #e0e0e0;
}

.info a {
    text-decoration: none;
}

.info img {
    width: 50px;
    height: 50px;
    margin: 10px;
    border-radius: 50%;
    transition: 0.3s;
}

.info img:hover {
    scale: 1.2;
}

.second-info {
    width: 1300px;
    margin-top: 20px;
    text-align: center;
}

.fun-make {
    display: inline-block;
    font-size: 14px;
}

.fio-info {
    margin: 0 0 -40px 0;
    float: right;
}




.team-showcase {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 50px 20px;
    gap: 10px;
}

.player-card {
    position: relative;
    text-decoration: none;
    flex: 1;
    text-align: center;
    transition: 0.4s ease;
    overflow: hidden;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Эффект подсветки фона при наведении */
.player-card:hover {
    background: radial-gradient(circle at center, rgba(250, 250, 0, 0.3) 0%, transparent 70%);
    transform: translateY(-10px);
}

/*rgba(140, 0, 255, 0.3)*/

.player-card img:not(.flag) {
    width: 100%;
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
}

.player-info {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 80%;
    justify-content: center;
    border-radius: 5px;
    z-index: 3;
    border-bottom: 3px solid var(--second-color);
}

.flag {
    width: 25px;
    height: auto;
}

.nickname {
    color: white;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Плавное появление фона */
.player-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(30,30,30,1), transparent);
    z-index: 1;
    opacity: 0.8;
}




.only-player-card {
    display: flex;
    background-color: var(--third-color);
    margin: 40px auto;
    width: 1300px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #444;
}

.only-player-photo {
    background: linear-gradient(135deg, #333, #1a1a1a);
    width: 400px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.only-player-photo img {
    height: 450px; /* Настрой под свое изображение */
    object-fit: contain;
}

.only-player-info {
    flex: 1;
    padding: 30px 50px;
    display: flex;
    flex-direction: column;
}

.only-player-header {
    border-bottom: 2px solid #444;
    padding-bottom: 20px;
    margin-bottom: 10px;
}

.only-nick-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.only-nick {
    font-size: 60px;
    margin: 0;
    color: white;
}

.only-real-name {
    font-size: 24px;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 10px;
}

.only-flag { width: 25px; }

.only-stats-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #333;
    font-size: 22px;
}

.only-label { color: #888; }
.only-value { color: white; font-weight: bold; }

.only-team a {
    color: var(--a-color);
    text-decoration: none;
}

.only-major-badge {
    background-color: #facc32; /* Желтый NAVI */
    color: black;
    padding: 5px 15px;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
}
.MVP {
    background-color: #435971; /* Желтый NAVI */
    color: black;
}

/* Соцсети (заглушки) */
.only-socials { display: flex; gap: 10px; }
.only-soc-icon {
    width: 35px;
    height: 35px;
    border-radius: 5px;
    transition: 0.3s;
}

.hltv img {
    padding: 15px 0 0 0;
    width: 20px;
    height: 20px;
}

.socialmedia {
    width: 50px;
    height: 50px;
	display: inline-block;
    color: #fff !important;
    font-size: 12px;
    text-align: center;
    background-color: #1f1f1f;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .5);
    border-radius: 4px;
    margin-right: 4px;
    transition: 0.3s;
}
.faceit svg {
    padding: 17px 3px 0 0;
    width: 20px;
    height: 20px;
}

.socialmedia:hover {
	background: var(--third-color);
}




.bracket-manual {
    width: 1300px;
    margin: 50px auto;
    background: var(--first-color);
    padding: 60px 0;
    border-radius: 20px;
    position: relative;
    border: 1px solid #555;
}

.bracket-title {
    text-align: center;
    font-size: 32px;
    color: white;
    margin-bottom: 40px;
}

.bracket-area {
    position: relative;
    width: 1100px; /* 1400 - 150*2 */
    height: 750px;
    margin: 0 auto; /* Центрируем, создавая отступы по 150px */
}

/* Колонки */
.b-col {
    position: absolute;
    top: 0;
    width: 260px;
}
.b-col-1 { left: 0; }
.b-col-2 { left: 420px; }
.b-col-3 { left: 840px; }

.b-caption {
    font-size: 20px;
    color: #777;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
}

/* Карточка матча */
.m-card {
    position: absolute;
    width: 260px;
    background: var(--third-color);
    border: 1px solid #444;
    border-radius: 4px;
    z-index: 5;
}

.m-date {
    font-size: 11px;
    color: #555;
    text-align: right;
    padding: 4px 8px;
}

.m-team {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    border-top: 1px solid #222;
    color: white;
}

.m-score {
    float: right;
    width: 35px;
    text-align: center;
    background: #111;
    margin-right: -10px;
}

/* Позиции карточек */
.m-1-1 { top: 60px; }
.m-1-2 { top: 210px; }
.m-1-3 { top: 400px; }
.m-1-4 { top: 550px; }

.m-2-1 { top: 135px; }
.m-2-2 { top: 475px; }

.m-3-1 { top: 305px; }

/* Г-ОБРАЗНЫЕ ЛИНИИ */
.line {
    position: absolute;
    border: 2px solid #444;
    z-index: 1;
}

/* Из 1/4 в 1/2 (Верхняя вилка) */
.l-1 {
    width: 80px; height: 75px;
    left: 260px; top: 105px;
    border-left: 0; border-bottom: 0;
    border-radius: 0 15px 0 0;
}
.l-2 {
    width: 80px; height: 75px;
    left: 260px; top: 180px;
    border-left: 0; border-top: 0;
    border-radius: 0 0 15px 0;
}

/* Из 1/4 в 1/2 (Нижняя вилка) */
.l-3 {
    width: 80px; height: 75px;
    left: 260px; top: 445px;
    border-left: 0; border-bottom: 0;
    border-radius: 0 15px 0 0;
}
.l-4 {
    width: 80px; height: 75px;
    left: 260px; top: 520px;
    border-left: 0; border-top: 0;
    border-radius: 0 0 15px 0;
}

/* Из 1/2 в Финал (Центральная вилка) */
.l-5 {
    width: 80px; height: 170px;
    left: 680px; top: 180px;
    border-left: 0; border-bottom: 0;
    border-radius: 0 20px 0 0;
}
.l-6 {
    width: 80px; height: 170px;
    left: 680px; top: 350px;
    border-left: 0; border-top: 0;
    border-radius: 0 0 20px 0;
}

/* Входы в следующие матчи (горизонтальные палочки) */
.m-2-1::before, .m-2-2::before, .m-3-1::before {
    content: "";
    position: absolute;
    left: -80px; top: 45px;
    width: 80px; height: 2px;
    background: #444;
}

/* Оформление побед */
.winner-navi { border-left: 4px solid #facc32; }
.gold { background: #facc32 !important; color: black; font-weight: bold; }
.champion-box { border: 2px solid #facc32; box-shadow: 0 0 20px rgba(250,204,50,0.3); }
.m-loser { opacity: 0.4; }

.t-logo {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin-right: 10px;
    object-fit: contain; /* Чтобы лого не искажалось */
}

/* Настройка текста внутри ячейки команды */
.m-team {
    display: block;
    position: relative;
    font-size: 15px;
    font-weight: 500;
}

.m-team span {
    display: inline-block;
    vertical-align: middle;
}

/* Иконка кубка рядом со счетом */
.trophy {
    position: absolute;
    right: -25px; /* Выносим за пределы ячейки счета */
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    filter: drop-shadow(0 0 5px gold);
}

/* Чтобы кубок не обрезался в финальной карточке */
.champion-box { overflow: visible; }

/* Фикс счета для NAVI в финале под кубок */
.m-score.gold {
    position: relative;
    border-radius: 0 4px 4px 0;
}




.b_full {
	height: 1100px;
	width: 1400px;
	margin: 10px 0;
}

.b_map {
	text-align: center;
	padding: 50px 0 25px 0;
}

.b_map iframe {
	width: 1000px;
	height: 800px;
	border: 0;
	border-radius: 15px;
}

.cont_left {
	width: 700px;
	float: left;
}

.cont_right {
	width: 700px;
	float: right;
}


.help_info {
	text-align: center;
	padding: 0;
	margin: 0;
}
.help_info p {
	padding: 0;
	margin: 10px 0;
}
.help_info h4 {
	padding: 0;
	margin: 20px 0 15px 0;
	scale: 1.3;
}
.help_info a {
	padding: 0;
	margin: 0;
	text-decoration: none;
	color: var(--a-color);
	transition: all 0.2s;
}
.help_info a:hover { scale: 1.03; }




/* Главная секция */
.main-player-section {
    width: 1300px;
    margin: 40px auto 0 auto;
}

.video-frame {
    width: 1300;
    height: 730px;
    background: #000;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid #333;
    position: relative;
}

/* Стили для локального видео */
.video-frame iframe {
    width: 1300px;
    height: 730px;
	border: none;
    object-fit: contain; /* Видео впишется без искажений */
}

.main-video-title {
    margin: 25px 0;
    font-size: 35px;
    color: white;
    font-weight: bold;
}

.separator-line {
    width: 1300px;
    height: 1px;
    background: #444;
    margin: 20px auto 40px auto;
}

/* Список видео снизу */
.video-feed {
    width: 1300px;
    margin: 0 auto 100px auto;
}

.video-row {
    width: 1260px; /* Немного уже, чтобы были внутренние отступы */
    padding: 20px;
    background: var(--third-color);
    margin-bottom: 15px;
    border-radius: 12px;
    border: 1px solid #333;
}

.video-preview {
    float: left;
    width: 280px;
    height: 157px;
    position: relative;
}

.video-preview img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.duration-tag {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 4px;
}

.video-description {
    float: left;
    width: 700px;
    margin-left: 30px;
}

.video-title {
    font-size: 24px;
    color: white;
    margin: 15px 0 5px 0;
}

.video-stats {
    color: #888;
    font-size: 16px;
}

.video-action {
    float: right;
    margin-top: 55px; /* Подбираем положение кнопки по вертикали */
}

.go-back {
    margin: 55px 0 0 55px;
}

.btn {
    display: block;
    width: 150px;
    height: 45px;
    line-height: 45px;
    background: #facc32;
    color: black;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    text-transform: uppercase;
    transition: 0.3s;
}
.btn:hover { background: white; }
.now { background: white;}

/* Очистка флоатов */
.clearfix { clear: both; }