@charset "utf-8";
/* CSS Document */
:root{
	--primary:#000;
	--border:#2b2b2b;
	--livetxt:red;
	--hover:red;
	--light:#f44214;
	--filter:sepia(0) hue-rotate(180deg) saturate(3);
}
body {
	padding:0; margin: 0; font-size: 12px; font-family:"Microsoft Yahei";
}
ul,ol{list-style:none; padding: 0; margin: 0;}
a{text-decoration:none;color: #333;}
p{margin:0; padding: 0;}
a{text-decoration:none;}
html, body {
		font-size: 16px;
}
a {
		font-size: 16px;
		color: #fff;
}

.bold {
	font-weight: bold;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.red {
	color: #f00;
	font-weight: bold;
}

.orange {
	color: #F54214;
}

.page ul {
	display: flex;
	justify-content: center;
}

.page li {
	padding: 10px;
}

.bg {
	background-color: var(--primary);
	color: #fff;
	border-bottom: solid 1px var(--border);
}

.navbar-collapse {
	flex-grow: inherit;
}

.nav-link {
    display: block;
    color: #fff;
    text-decoration: none;
	padding: 0 20px;
    transition: all .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
.nav-link {
    transition: none
}
}
.nav-link:focus, .nav-link:hover {
    color:var(--hover);
	background: #F2F2F2;
	border-radius: 20px;
}
.nav-link.disabled {
    pointer-events: none;
    cursor: default
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.content {
	display: flex;
  flex-wrap: wrap;
}

#hot_matches {
	height: 300px;
	overflow: hidden;
}

#hot_matches span {
	float: right;
	background-color: #000;
	color: #CBFF00;
	padding: 3px 5px;
	font-size: 12px;
}

#hot_matches .logo img {
	width: 30px;
	height: 30px;
}

#hot_matches .item {
	background: url(../images/line.jpg) 0 50px  no-repeat #fff;
	border-radius: 10px;
	margin: 10px 20px 10px 0;
	padding: 15px;
}

#hot_matches .item .d-flex {
	text-align: center;
	padding-top: 20px;
}

#hot_matches .item .d-flex div {
	flex: 1;
}

#hot_matches a {
	display: block;
	background-color: #CBFF00;
	border: solid 1px #000;
	line-height: 40px;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
	border-radius: 5px;
}

#index_video {
	/* background: url(../images/bg_video.png) top center no-repeat var(--primary); */
	background: var(--primary);
	padding-bottom: 100px;
}

#index_video ul {
	border-left: solid 1px var(--border);
}

#index_video li {
	background: url(../images/yinhao.png) 95% 10px no-repeat;
	border-right: solid 1px var(--border);
	border-bottom: solid 1px var(--border);
	padding: 20px;
	padding-top: 50px;
	line-height: 250%;
	color: #999;
}
#index_video li:first-child{background: none;}
#index_video li h2{
	text-align: center;
	line-height: 3rem;
	color: #fff;
	letter-spacing: 5px;
	font-weight: bold;
}
#index_video li .ellipsis {
	/* width: 80%; */
	white-space: inherit;
	line-height: 1.5rem;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;      /* 显示4行 */
    overflow: hidden;
    text-overflow: ellipsis;    /* 超出显示省略号 */
    word-break: break-all; 
}

#index_video li .button {
	/* margin-top: 50px; */
}

#breadcrumb {
	position: relative;
	height: 65px;
	line-height: 65px;
	margin-top: 500px;
	color: #fff;
}

#breadcrumb a {
	color: #fff;
}

#breadcrumb .container {
	position: relative;
	z-index: 999;
}

#breadcrumb .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 65px;
	line-height: 65px;
	background-color: #000;
	opacity: 0.5;
}

#main {
	width: 100%;
}

#main h1 {
	text-align: center;
	color: #fff;
	padding-bottom: 30px;
}

#main .tit {
	font-size: 18px;
	line-height: 70px;
	overflow: hidden;
	padding-right: 30px;
}

#main .tit .active {
	border-bottom: solid 3px #144DD2;
}

#main .tit h5 {
	min-width: 100px;
	margin-bottom: 0;
}

#main .tit div {
	margin-left: 50px;
	white-space: nowrap;
}
.zbj {
    width: 100%;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* gap: 10px; */
}
#wrap {
	/* flex: 0 0 75%; */
	margin-bottom: 20px;
	border: solid 1px var(--border);
}

#wrap h1 {
	color: #fff;
	padding-bottom: 20px;
}

#wrap .match_news {
	padding: 30px 20px;
}

#wrap a, #sidebar a {
	color: #fff;
}

#wrap h1 {
	color: #fff;
}

#wrap .match_news .pic {
	float: right;
}

#wrap .match_news .pic img {
	width: 200px;
	height: 135px;
	border-radius: 10px;
}

#wrap .match_news .text {
	margin-right: 215px;
}
#wrap .match_news.jijin .text{margin-right: 0;display: flex;justify-content: space-between;gap:10px;}
#wrap .match_news.jijin .text .time{flex-shrink: 0;}
#wrap .match_news li {
	height: 150px;
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid var(--border);
}
#wrap .match_news.jijin li{height: auto;padding-bottom: 0;}

#wrap .match_news .tit {
	font-weight: bold;
}
#wrap .match_news .tit a{display: inline-block;overflow: hidden;text-overflow: ellipsis;max-width: 100%;}
#wrap .match_news .time {
	font-size: 14px;
	color: #aaa;
	margin-bottom: 15px;
}

#wrap .match_news .desc {
	color: #999;
	display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}


#sidebar {
	flex: 0 0 25%;
	color: #fff;
}

#sidebar .video dt {
	background: url(../images/line.jpg) 0 40px no-repeat;
	padding-bottom: 20px;
	color: #fff;
}

#sidebar .video li {
	position: relative;
	padding: 15px;
	border-bottom: solid 1px var(--border);
}

#sidebar .video li span {
	position: absolute;
	top: 25px;
	right: 15px;
}

#sidebar .video li p {
/*	height: 25px;*/
	overflow: hidden;
	font-weight: bold;
}

#sidebar .video li div {
	color: #aaa;
	font-size: 14px;
}

#sidebar dt {
	font-size: 20px;
	padding-bottom: 10px;
}

#sidebar .tags a {
	display: block;
	float: left;
	padding: 3px 10px;
	margin-bottom: 10px;
	margin-right: 10px;
}

#match_list  {
	padding-bottom: 100px;
}


#match_list ul.list {
	border: solid 1px var(--border);
	
}
#match_list .mctitle,.mctitle h1{color: #fff;line-height: 3rem;text-align: center;letter-spacing: 3px;font-size: 1.2rem;}


#match_list .list li {
	border-bottom: solid 1px var(--border);
	padding-left: 5px;
}

#match_list li a {
	color: #fff;
}

#match_list .name {
	width: 15%;
}

#match_list .time {
	width: 10%;
}

#match_list .info_center {
	width: 55%;
}

#match_list .look {
	width: 20%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#match_list .look a{
	padding: 0 10px 0 25px;
	background: url(../images/icon-live.png) no-repeat left center;
}
#match_list .look.start a{color: var(--livetxt);}
#match_list .name img {
	height: 30px;
}

#match_list .match__item-list {
	line-height: 35px;
}

#match_list .match__date {
	margin: 20px 0;
}

#match_list .match__date span {
	background-color: #259C4E;
	color: #fff;
	padding: 10px 20px;
	border-radius: 20px;
}

#match_list .match__item-list {
	display: flex;
	background-color: #fff;
	margin-bottom: 10px;
	padding: 10px 20px;
}

#match_list .match__time {
	width: 60px;
	font-weight: bold;
	color: #259C4E;
}

#match_list .match__label {
	width: 200px;
	text-align: center;
}

#match_list .match__home-team {
	width: 200px;
	text-align: right;
}

#match_list .match__vs {
	width: 60px;
	text-align: center;
}

#match_list .match__visitor-team {
	width: 200px;
	text-align: left;
}

#match_list .match__team-icon {
	width: 35px;
	height: 35px;
	border: solid 2px #BFCBDA;
	border-radius: 50%;
	margin: 0 10px;
}

#match_list .match__play-btn {
	width: 300px;
	text-align: right;
}

#index_news {
	/* background-image: url(../images/bg_index_news.png); */
	background-position: calc(100vw * 0.32) -20px;
	background-repeat: no-repeat;
}

#index_news li {
	line-height: 200%;
	border-bottom: solid 1px var(--border);
	border-right: solid 1px var(--border);
	padding: 30px; padding-top: 50px;
}

#index_news .newstxt {
	color: #999;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;  
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all; 
}

#index_news .bold a {
	color: #fff;
}

#index_news .btn {
	margin-top: 20px;
	border: solid 1px #999;
	color: #999;
}
#index_news .btn:hover{color: #fff;}

#hotevent ul ul {
	border-left: solid 1px var(--border);
}

#hotevent ul li li {
	border-right: solid 1px var(--border);
	border-bottom: solid 1px var(--border);
	padding: 20px;
}

#hotevent ul li ul .d-flex {
	height: 60px;
	justify-content: space-between;
}
.info_center.d-flex{
	align-items: center;
	justify-content: center;
}
#hotevent ul li ul .logo {
	position: relative;
}

#hotevent ul li ul .logo img {
	width: 60px;
	height: 60px;
	border: solid 3px #f00;
	border-radius: 50%;
	background-color: #000;
}

#hotevent ul li ul .logo .home {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
}

#hotevent ul li ul .logo .away {
	position: absolute;
	top: 0;
	left: 40px;
	z-index: 99px;
}
.home,.away{
	display: flex;align-items: center;flex-grow: 0;
}
.home{justify-content: flex-end;}
.home .text,.away .text{white-space: nowrap;}
#hotevent ul li ul .competition {
	margin-top: 20px;
	margin-bottom: 15px;
	color: #F54214;
	border: solid 1px var(--border);
	display: inline-block;
}

#hotevent ul li ul .time {
	border: solid 1px var(--border);
	color: #F54214;
	font-size: 22px;
	text-align: center;
	line-height: 130%;
	font-weight: bold;
}

#hotevent ul li ul .time div {
	padding: 0 5px;
}

#hotevent ul li ul .date {
	border-top: solid 1px var(--border);
	color: #fff;
	font-size: 16px;
}

#hotevent ul li ul .btn {
	display: block;
	background-color: #F54214;
	border-radius: 10px;
	color: #fff;
	margin-top: 20px;
}

#hotevent .col-3 a {
	float: right;
	padding: 5px 0 5px 20px;
	color: #fefefe;
	white-space: nowrap;
}

.match_list {
	background-color: #18181B;
}

.match_list .bg {
	padding: 80px 0 180px 0;
	background: url(../images/bg_match.jpg) bottom center no-repeat;
}
.navbar-brand,.navbar-brand h1{font-size: 32px;font-weight: bold;color: #fff;letter-spacing: 5px;}
.navbar-brand:hover{color: #fff;}
.match_list h1 {
	text-align: center;
	color: #fff;
	font-size: 20px;
	padding-bottom: 50px;
}
.news_list h1{
	font-size: 24px;color: #fff;padding: 10px;border: solid 1px var(--border);
}
.match_list #match_list {
	background: none;
}
.news_list.jijin{}
#video_list {

}

.news_list {
	background-color: var(--primary);
}
.news_list .citiao ul{
	display: flex;
	flex-wrap: wrap;
	gap:5px 12px;
}
.news_list .col-9 {
	border-left: solid 1px var(--border);
	border-right: solid 1px var(--border);
	padding-left: 0;
	padding-right: 0;
}

.news_list .col-3 {
	padding-left: 0;
	padding-right: 0;
}

#match_news {
	display: flex;
	justify-content: space-between;
	padding-top: 50px;
}


#match_news dl {
	width: 48%;
	background-color: #fff;
	border-radius: 10px;
	text-align: left;
	padding: 20px;
}

.info_center {
	line-height: 50px;
}

.info_center .home {
	text-align: right;
}

.info_center .away {
	text-align: left;
}

.info_center .home, .info_center .away {
	margin: 5px 0;
	min-width: 250px;
}

.info_center .home img, .info_center .away img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: solid 2px #034CCF;
	padding: 3px;
	margin: 0 10px;
}

#match_list .look {
	text-align: center;
}

#match_list .cate li {
	float: left;
	background-color: #F87228;
	border-radius: 10px;
  padding: 3px 20px;
  margin-right: 20px;
  margin-bottom: 10px;
}

#match_list .cate li a {
	color: #fff;
}


.tag_list {
	padding: 10px;
}

.tag_list .col {
	line-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

#footer {
	background-color: var(--primary);
	color: #fff;
	text-align: center;
	/* line-height: 80px; */
	padding: 10px 0;
}

#footer .link {
	/* height: 80px; */
	/* line-height: 80px; */
	padding-top: 10px;
}

#footer .link a {
	color: #fff;
	padding: 20px;
}

#footer p {
	/* height: 80px; */
	padding:10px 0;
}

.match_info {
	display: flex;
	background-color: var(--primary);
}

#match_info {
	text-align: center;
	color: #fff;
}

#match_info .info {
}

#match_info .competition {
	line-height: 30px;
	padding-top: 20px;
}
.zbj_box img{
	filter: var(--filter);
}
.zbj_con{
	text-align: left;
	padding:15px 10px;
}
.zbj_con h1{font-size: 18px;}
#match_info .score {
	display: flex;
	justify-content: space-around;
	/* background: url(../images/bg_match_top.jpg) top center repeat-y #000; */
	background: linear-gradient(to right, var(--primary) 0%, var(--primary) 50%, var(--light) 50%, var(--light) 100%);
	line-height: 100px;
	border-bottom: solid 1px var(--border);
	border-top: solid 1px var(--border);
	margin-top: 20px;
}

#match_info .score img {
	width: 60px;
	height: 60px;
	margin-top: 20px;
}


#match_info .button {
	line-height: 60px;
	padding: 20px 0;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border:solid 2px #18181B;
}

#match_info .button a {
	background-color: #F54214;
	padding: 5px 20px;
	color: #fff;
	border-radius: 5px;
}

#main .match_news .tit {
	height: 80px;
	padding-top: 30px;
	text-indent: 40px;
	font-weight: bold;
	font-size: 24px;
}

#main .match_news li {
	font-size: 18px;
	line-height: 80px;
	text-indent: 40px;
	border-bottom: solid 1px #ccc;
}

#main .match_news span {
	padding-right: 20px;
	color: #2349B4;
	font-weight: bold;
}

#article {
	background-color: var(--primary);
	border-bottom: solid 1px var(--border);
	color: #fff;
	padding-bottom: 20px;
}

#article img {
	max-width: 100%;
	margin: 5px;
}

#article .title {
	padding: 20px 0;
	line-height: 40px;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	border-bottom: solid 1px #aaa;
}

#article .time {
	text-align: center;
	padding-bottom: 20px;
}

#article .info {
	text-align: center;
	line-height: 50px;
}
#article .content p{text-indent: 2rem;line-height: 1.8rem;padding:5px 0;}

@media (max-width: 600px) {
	.home .text,.away .text {
		display: inline-block; 
		max-width: 6em; 
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.nav-link {
		margin:  5px 0;
	}
	.nav-item {
		background-color: var(--light);
	}


	#hot_matches .item .mb-3 {
		height: 25px;
	}

	#hot_matches .item .d-flex {
		height: 100px;
		padding-top: 10px;
	}

	#hot_match .desc {
		margin-left: 0;
		margin-top: 0px;
	}

	#main h1 {
		padding-top: 30px;
	}

	#match_list, #main .tit {
		min-width: 320px;
	}
	#match_list{padding-bottom: 30px;}
	#match_list .ico {
		font-weight: bold;
	}

	.info_center {
		width: 100%;
	}

	.info_center .home, .info_center .away {
		flex: 1 1 18%;
	}

	#wrap .match_news{padding: 0;}
	#wrap .match_news li {
		height: auto;
	}

	#wrap .match_news .pic {
		width: 160px;
	}

	#wrap .match_news .pic img {
		width: 100%;
		height: 120px;
	}

	#wrap .match_news .text {
		margin-right: 175px;
	}
	#wrap .match_news.jijin .text{margin-right: 0;flex-direction: column;	}
	#wrap .match_news .desc {
		height: 48px;
		overflow: hidden;
	}
	#index_video{padding-bottom: 30px;}
	#index_news li{padding:15px 2%;}
	#index_news li>img {
		display: block;
		width: 50%;
		/* margin: 0 auto; */
	}
	#index_news .btn img{display: none;}
	#index_news ul .item {
		margin-top: 30px;
	}

	#match_list .name {
		white-space: nowrap;
	}

	#match_list .name a {
		font-size: 16px;
		/* padding-left: 20px; */
		margin-top: 1px;
	}
	#match_list .time{width: auto;}

	#match_list .name img {
		/* display: none; */
	}

	#match_list .info_center {
		padding: 15px 0;
		width: 100%;
	}

	#match_list .ss-item {
		padding-top: 20px;
	}

	#match_list .ss-item .name {
		width: 20%;
	}

	.info_center .home, .info_center .away {
		width: auto;
		min-width: auto;
	}

	#match_list .look {
		width: 100%;
		padding-bottom: 20px;
	}

	#wrap, #sidebar {
		flex: auto;
	}

	#sidebar {
		padding-left: 0;
	}

	.match_info {
		display: block;
	}
	#match_info {
		width: 100%;
		margin-bottom: 30px;
	}

	#match_info .score .home , #match_info .score .away {
		width: auto;
	}

	#match_info .score .home span , #match_info .score .away span {
		display: none;
	}

	#match_info .score p {
		display: block;
		line-height: 14px;
	}

	#match_info .score {
	}

	#match_info .score img {
		width: 50px;
		height: 50px;
		margin: 20px;
	}

	#match_info .score span {
		font-size: 14px;
	}
}
.zbj_box{position: relative;width: 100%;}
.stream-sources__bar{background: none !important;border: 0 !important;}
.stream-sources__row{display: inline-flex !important;flex-wrap: wrap;justify-content: center;}
.src-hint{display: none !important;}
.src-pill{padding: 5px !important;border-radius: 10px !important;display: inline !important;height: auto !important;border:0px !important;padding-top:8px !important;}
.stream-sources__row a,.src-name{background: #fff !important;color:#f70606 !important;font-size: 20px !important;}


/* ===== [美化增强 ENH v1] 按钮/排版 —— 仅追加,未改动任何类名/结构/链接锚点 ===== */
/* 变量沿用模板 theme/*.css：--livetxt(主题强调) / --hover(更亮) / --light(更深)，以适配10套配色 */
:root{ --enh-ease: cubic-bezier(.4,0,.2,1); }

/* 通用过渡（真实存在于本模板HTML的按钮/链接） */
#match_info .button a,.new_list_item_button a,.paly a,.mask-btn a,#index_news .btn,.more,#match_list .look a{
  transition: transform .18s var(--enh-ease), box-shadow .18s var(--enh-ease), background .18s var(--enh-ease), border-color .18s var(--enh-ease), color .18s var(--enh-ease), filter .18s var(--enh-ease);
}

/* 主/直播按钮：主题渐变填充 + 圆角（渐变失败自动回退纯色 var(--livetxt)） */
#match_info .button a,.new_list_item_button a,.paly a,.mask-btn a{
  display:inline-block; border:0; color:#fff; border-radius:8px; font-weight:700; letter-spacing:.3px;
  background: var(--livetxt,#e4393c);
  background: linear-gradient(135deg, var(--hover,#ff5a3c), var(--light,#c01f38));
  box-shadow:0 3px 10px -3px rgba(0,0,0,.35);
  box-shadow:0 3px 10px -3px color-mix(in srgb, var(--livetxt,#e4393c) 50%, transparent);
}
.new_list_item_button a,.paly a,.mask-btn a{ padding:6px 16px; }

/* 悬停：上浮 + 主题色投影 */
#match_info .button a:hover,.new_list_item_button a:hover,.paly a:hover,.mask-btn a:hover{
  transform: translateY(-2px);
  box-shadow:0 9px 20px -6px rgba(0,0,0,.4);
  box-shadow:0 9px 20px -6px color-mix(in srgb, var(--livetxt,#e4393c) 60%, transparent);
  filter:saturate(1.06);
}

/* 描边“查看更多”按钮：圆角 + 悬停上浮并填主题色 */
#index_news .btn{ border-radius:8px; }
#index_news .btn:hover{ transform: translateY(-2px); border-color:var(--hover,#ff5a3c); color:var(--hover,#ff5a3c); }

/* :active 复位 */
#match_info .button a:active,.new_list_item_button a:active,.paly a:active,.mask-btn a:active,#index_news .btn:active{
  transform: translateY(0); box-shadow:none;
}

/* “更多/more”文字链接：悬停右移 + 主题高亮 */
.more{ display:inline-block; }
.more:hover{ transform: translateX(3px); color:var(--hover,#ff5a3c); }

/* 赛事“看直播”入口链接：悬停右移 + 主题高亮（保留原图标背景） */
#match_list .look a:hover{ transform: translateX(3px); color:var(--hover,#ff5a3c); }
/* ===== [/美化增强 ENH v1] ===== */


/* ===== [排版布局 LAYOUT v1] 卡片/列表/区块/缩略图视觉打磨 —— 仅追加,不改结构/类名/布局引擎 ===== */
/* 变量沿用模板 theme/*.css：--livetxt(主题强调)/--hover/--light，均带硬编码回退，适配10套配色 */
/* 全部为纯视觉增量：border-radius / box-shadow / transition / hover 淡染 / overflow / 缩放；未动 display/flex/width/position/margin */

/* —— 卡片/内容容器：更柔圆角 + 轻阴影 + 悬停上浮加强阴影（真实存在的白底/内容卡片） —— */
#hot_matches .item,#match_list .match__item-list,#match_news dl{
  border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition: box-shadow .22s var(--enh-ease), transform .22s var(--enh-ease);
}
#hot_matches .item:hover,#match_list .match__item-list:hover,#match_news dl:hover{
  transform: translateY(-3px);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.28);
  box-shadow:0 10px 26px -10px color-mix(in srgb, var(--livetxt,#e11d48) 24%, rgba(0,0,0,.22));
}

/* —— 列表行/比赛行/新闻行：悬停主题色淡染 + 过渡（不改 border/height/布局引擎） —— */
#match_list .list li,#wrap .match_news li,#index_news li,#index_video li,#sidebar .video li{
  transition: background-color .18s var(--enh-ease);
}
#match_list .list li:hover,#wrap .match_news li:hover,#index_news li:hover,#index_video li:hover,#sidebar .video li:hover{
  background-color: color-mix(in srgb, var(--livetxt,#e11d48) 7%, transparent);
}

/* —— 区块标题/区块：左侧主题色装饰条（inset box-shadow，零布局位移，落在已有内边距内不挤压文字） —— */
.news_list h1{ box-shadow: inset 3px 0 0 var(--livetxt,#e11d48); }
.zbj_con{ box-shadow: inset 3px 0 0 var(--livetxt,#e11d48); }

/* —— 新闻缩略图：直接父级 overflow:hidden 防溢出 + 悬停轻微放大 —— */
#wrap .match_news .pic{ overflow:hidden; border-radius:10px; }
#wrap .match_news .pic img{ transition: transform .35s var(--enh-ease); }
#wrap .match_news li:hover .pic img,#wrap .match_news .pic:hover img{ transform: scale(1.05); }
/* ===== [/排版布局 LAYOUT v1] ===== */


/* ===== [按钮突出 v2] 主行动按钮更醒目易点击 —— 仅追加, 不改类名/结构/链接 ===== */
/* 主CTA = 每场比赛行「正在直播/即将开始」入口(#match_list .look a) + 详情页「进入直播」主按钮(#match_info .button a)。
   变量沿用 theme/*.css(--livetxt/--hover/--light)并带硬编码回退, 适配10套配色。仅本两处放大, 不动导航/更多/新闻等其它按钮。 */
@keyframes enhCtaPulse{
  0%,100%{ box-shadow:0 3px 12px -4px rgba(228,57,60,.5);  box-shadow:0 3px 12px -4px color-mix(in srgb, var(--livetxt,#e4393c) 45%, transparent); }
  50%    { box-shadow:0 6px 22px -2px rgba(228,57,60,.85); box-shadow:0 6px 22px -2px color-mix(in srgb, var(--livetxt,#e4393c) 70%, transparent); }
}

/* 主CTA: 胶囊 + 主题渐变填充 + 彩色光晕, 字重800, 加大点击热区(渐变失败回退纯色) */
#match_list .look a,#match_info .button a{
  display:inline-flex !important; align-items:center; justify-content:center;
  font-weight:800 !important; letter-spacing:.3px; white-space:nowrap;
  padding:8px 22px 8px 34px !important;            /* 左侧留 live 图标位, 更大点击热区 */
  border-radius:999px !important;                  /* 胶囊形, 更像可点按钮 */
  color:#fff !important; border:0 !important;
  background: url(../images/icon-live.png) no-repeat 13px center / 15px 15px, var(--livetxt,#e4393c) !important;
  background: url(../images/icon-live.png) no-repeat 13px center / 15px 15px, linear-gradient(135deg, var(--hover,#ff5a3c), var(--light,#c01f38)) !important;
  box-shadow:0 4px 14px -4px rgba(228,57,60,.55);
  box-shadow:0 4px 14px -4px color-mix(in srgb, var(--livetxt,#e4393c) 55%, transparent);
  transition: transform .16s var(--enh-ease), box-shadow .16s var(--enh-ease), filter .16s var(--enh-ease);
  cursor:pointer;
}
/* 详情页主按钮本无 live 图标, 只留渐变胶囊并均衡内边距 */
#match_info .button a{ padding:9px 26px !important; background: linear-gradient(135deg, var(--hover,#ff5a3c), var(--light,#c01f38)) !important; }

#match_list .look a:hover,#match_info .button a:hover{
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow:0 10px 26px -4px color-mix(in srgb, var(--livetxt,#e4393c) 65%, transparent) !important;
  filter:brightness(1.07) saturate(1.05) !important;
}
#match_list .look a:active,#match_info .button a:active{ transform: translateY(0) scale(.98) !important; }

/* 直播中(.look.start): 轻柔呼吸光晕吸引注意, 只动 box-shadow 不放大; 相邻错峰避免同时闪太吵 */
@media (prefers-reduced-motion: no-preference){
  #match_list .look.start a{ animation: enhCtaPulse 2s ease-in-out infinite; }
  #match_list .list li:nth-child(2n) .look.start a{ animation-delay:-1s; }
  #match_list .list li:nth-child(3n) .look.start a{ animation-delay:-1.4s; }
}
/* ===== [/按钮突出 v2] ===== */


/* ===== [主CTA强化 v3] 首页比赛行「正在直播/即将开始」主入口按钮 —— 仅追加, 不改任何HTML/类名/结构/链接 ===== */
/* 真实渲染结构: <li class="match_li ..."> ... <div class="look match_every start"><a href="...">正在直播</a></div> </li>
   精确选择器 = #match_list .look.match_every a (比 v1/v2 的 #match_list .look a 多一个类, 特异性更高; 再叠 !important 与靠后源序, 稳压之前所有版本)。
   主题主色取 --livetxt(各主题均定义: 绿/红/蓝…)构建 浅→深 渐变, color-mix 精细化 + 十六进制回退, 一套 CSS 适配全部 10 套配色。 */
@keyframes enhCtaPulseV3{
  0%,100%{ box-shadow:0 3px 12px -4px rgba(0,192,72,.45); box-shadow:0 3px 12px -4px color-mix(in srgb, var(--livetxt,#00c048) 42%, transparent); }
  50%    { box-shadow:0 7px 24px -2px rgba(0,192,72,.82); box-shadow:0 7px 24px -2px color-mix(in srgb, var(--livetxt,#00c048) 74%, transparent); }
}

/* 醒目填充胶囊 CTA: 主题渐变填充 + 白字800 + 彩色光晕 + 加大点击热区 */
#match_list .look.match_every a{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  line-height:1.1 !important; white-space:nowrap !important; text-decoration:none !important;
  font-weight:800 !important; letter-spacing:.3px !important; color:#fff !important;
  padding:7px 18px !important;                       /* 更大点击热区, 行内文字按钮 */
  border:0 !important; border-radius:999px !important;/* 胶囊形 */
  /* 回退: 主题变量直填(浅 --hover → 深 --livetxt), 变量缺失退绿色 hex */
  background: linear-gradient(135deg, var(--hover,#30e078), var(--livetxt,#00c048)) !important;
  /* 增强: color-mix 精细 浅→深, 更立体 */
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--livetxt,#00c048) 78%, #ffffff),
      color-mix(in srgb, var(--livetxt,#00c048) 90%, #000000)) !important;
  box-shadow:0 4px 14px -3px rgba(0,192,72,.55) !important;
  box-shadow:0 4px 14px -3px color-mix(in srgb, var(--livetxt,#00c048) 58%, transparent) !important;
  transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s cubic-bezier(.22,1,.36,1), filter .16s cubic-bezier(.22,1,.36,1) !important;
  cursor:pointer !important;
}
#match_list .look.match_every a:hover{
  transform: translateY(-2px) scale(1.06) !important;
  filter: brightness(1.08) saturate(1.06) !important;
  box-shadow:0 12px 30px -4px rgba(0,192,72,.6) !important;
  box-shadow:0 12px 30px -4px color-mix(in srgb, var(--livetxt,#00c048) 72%, transparent) !important;
}
#match_list .look.match_every a:active{ transform: translateY(0) scale(.98) !important; }

/* 在播态 .start: 轻柔呼吸光晕(只动 box-shadow, 2s, 不放大), 吸引注意 */
@media (prefers-reduced-motion: no-preference){
  #match_list .look.match_every.start a{ animation: enhCtaPulseV3 2s ease-in-out infinite !important; }
}
/* ===== [/主CTA强化 v3] ===== */


/* ===== [视觉加强 v4] 静态即可见的大胆升级 —— 仅追加, 不改任何HTML/类名/结构/链接 ===== */
/* 本套 theme/*.css 全为深色主题(.bg=var(--primary)近黑, 白字): 纯黑阴影在深底上不可见,
   故改用「抬高亮面 + 顶部高光 + 主题色描边 + 贴边彩色光晕」来做静态立体感。
   变量沿用 --primary(深底)/--livetxt(主题强调)/--hover/--border, 均带回退, 一套CSS适配全部10套配色。
   仅追加视觉属性(圆角/背景色/描边/阴影/内边距/伪元素装饰), 不动 display/flex/grid/float/position/width/height。 */

/* 1) 内容卡片(新闻/视频): 明显立体化 —— 抬高亮面 + 14px大圆角 + 主题色淡描边 + 顶部高光和贴边光晕(深色下静态可见) */
#index_news li,#index_video li{
  border-radius:14px !important;
  background-color:rgba(255,255,255,.05) !important;                                     /* 回退: 通用抬高亮面 */
  background-color:color-mix(in srgb, var(--primary,#001204) 84%, #ffffff) !important;   /* 主题化亮面: 明显比区块底色更亮 */
  border:1px solid var(--border,#1a3c20) !important;                                      /* 回退描边 */
  border:1px solid color-mix(in srgb, var(--livetxt,#00c048) 22%, transparent) !important;/* 主题色淡描边 */
  box-shadow:0 10px 26px -12px rgba(0,0,0,.6),
             0 0 22px -14px color-mix(in srgb, var(--livetxt,#00c048) 60%, transparent),
             inset 0 1px 0 rgba(255,255,255,.07) !important;                              /* 顶部高光+贴边彩光=层次 */
  overflow:hidden;
}

/* 2) 区块标题(热门赛事/集锦录像): 加粗放大 + 居中主题色渐变发光下划线, 静态可见 */
#match_list .mctitle,#index_video li h2{ font-weight:800 !important; font-size:1.5rem !important; }
#match_list .mctitle::after,#index_video li h2::after{
  content:""; display:block; width:64px; height:3px; margin:8px auto 0; border-radius:3px;
  background:var(--livetxt,#00c048);
  background:linear-gradient(90deg, transparent, var(--livetxt,#00c048), transparent);
  box-shadow:0 0 10px -1px color-mix(in srgb, var(--livetxt,#00c048) 70%, transparent);
}

/* 3) 主直播按钮再强化: 比 v3 更大(9px 22px) + 叠加静态彩色光晕(用 drop-shadow, 不干扰 .start 呼吸动画) */
#match_list .look.match_every a{
  padding:9px 22px !important;
  filter:drop-shadow(0 5px 12px color-mix(in srgb, var(--livetxt,#00c048) 55%, transparent)) !important;
}

/* 4) 比赛行更清晰: 明显分隔线 + 上下留白, 列表更有条理 */
#match_list .match_li{
  padding-top:12px !important; padding-bottom:12px !important;
  border-bottom:1px solid var(--border,#1a3c20) !important;                               /* 回退分隔线 */
  border-bottom:1px solid color-mix(in srgb, var(--livetxt,#00c048) 14%, var(--border,#1a3c20)) !important;/* 主题微染更清晰 */
}
/* ===== [视觉加强 v4] end ===== */


/* ===== [横排综合加强 v5] 首页比赛行整行精致化 + 直播中/即将开始按钮明显区分 —— 仅追加, 保持横排列表(绝不改成卡片网格), 不改任何HTML/类名/结构/链接; 全部 !important + 靠后源序盖过 v1-v4 ===== */
/* 真实渲染结构(curl http://localhost:8914/ 校验):
   行容器   <li class="match_li ss-item d-flex ...">              => #match_list .match_li
   队徽     <img class="lazyload"> (位于 .home / .away 内)         => #match_list .info_center img
   联赛名   <div class="name"><a>西甲</a>                          => #match_list .match_li .name a
   中间VS   <div>VS</div> (info_center 下唯一无 .home/.away 类的中间块) => #match_list .info_center>div:not(.home):not(.away)
   直播中   <div class="look match_every start"><a>正在直播</a>     => #match_list .look.match_every.start a       (实心渐变胶囊+脉冲点)
   即将开始 <div class="look match_every "><a>即将开始</a>          => #match_list .look.match_every:not(.start) a (描边胶囊)
   两态同基类 .look.match_every, 仅以 .start 修饰类区分; 主色取 --livetxt(浅色伴 --hover), 各主题皆定义(绿/红/蓝/青/紫…), 均带 hex 回退, 一套 CSS 适配全部 10 套配色 */

/* 1) 比赛行: 隔行淡色 + 悬停整行高亮+左侧主题条 + 分隔线(深色主题用半透明主题色叠加, 任何底色都可见) */
#match_list .match_li:nth-child(2n){
  background:color-mix(in srgb, var(--livetxt,#00c048) 6%, transparent) !important;
}
#match_list .match_li:hover{
  background:color-mix(in srgb, var(--livetxt,#00c048) 12%, transparent) !important;
  box-shadow:inset 3px 0 0 0 var(--livetxt,#00c048) !important;
}

/* 2) 队徽 更大圆形 */
#match_list .info_center img{
  width:40px !important; height:40px !important; border-radius:50% !important;
  object-fit:cover !important;
  background:rgba(255,255,255,.08) !important; padding:3px !important;
}

/* 3) 联赛 主题色胶囊标签(保持行内, 不动布局) */
#match_list .match_li .name a{
  display:inline-block !important;
  background:color-mix(in srgb, var(--livetxt,#00c048) 16%, transparent) !important;
  color:var(--livetxt,#00c048) !important;
  padding:3px 11px !important; border-radius:999px !important;
  font-weight:700 !important; text-decoration:none !important;
}

/* 4) VS 渐变徽章白字 */
#match_list .info_center>div:not(.home):not(.away){
  background:linear-gradient(135deg, var(--livetxt,#00c048), color-mix(in srgb, var(--livetxt,#00c048) 55%, #000)) !important;
  border-radius:8px !important; color:#fff !important;
  font-weight:800 !important; padding:3px 10px !important; line-height:1.2 !important;
}

/* 5) 直播中按钮 = 实心填充主题渐变胶囊(醒目) + 白字800 + 彩色光晕 + 白色脉冲点 */
#match_list .look.match_every.start a{
  background:linear-gradient(135deg, color-mix(in srgb, var(--livetxt,#00c048) 82%, #ffffff), var(--livetxt,#00c048)) !important;
  background-image:linear-gradient(135deg, color-mix(in srgb, var(--livetxt,#00c048) 82%, #ffffff), var(--livetxt,#00c048)) !important;
  color:#fff !important; border:0 !important; border-radius:999px !important;
  font-weight:800 !important;
  box-shadow:0 5px 16px -4px color-mix(in srgb, var(--livetxt,#00c048) 55%, transparent) !important;
  filter:none !important;
}
#match_list .look.match_every.start a::before{
  content:"" !important; display:inline-block !important;
  width:7px !important; height:7px !important; border-radius:50% !important;
  background:#fff !important; margin-right:8px !important; flex:0 0 auto !important;
  animation:rowLiveDotV5 1.4s infinite !important;
}
@keyframes rowLiveDotV5{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.75); }
  70%{ box-shadow:0 0 0 6px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

/* 6) 即将开始按钮 = 描边次要胶囊(白底+主题色边+主题色字+无光晕), 与直播中一眼可区分 */
#match_list .look.match_every:not(.start) a{
  background:#fff !important; background-image:none !important;
  color:var(--livetxt,#00c048) !important;
  border:1.5px solid color-mix(in srgb, var(--livetxt,#00c048) 52%, transparent) !important;
  box-shadow:none !important; filter:none !important;
  border-radius:999px !important; font-weight:700 !important;
  animation:none !important;
}
/* ===== [横排综合加强 v5] end ===== */