/* ============================================================
   站点美化覆盖样式（override.css）
   —— 在所有页面的 bootstrap.min.css 之后加载，只做视觉增强，
      不修改任何 HTML 结构、JS 逻辑与数据文件，保证功能不变。
   ============================================================ */

/* 1. 全局字体：现代中文 + 西文字体栈 */
body {
	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
		"Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 2. 全局背景：极淡灰，让白色内容/卡片浮现出来 */
body {
	background-color: #f5f6f8;
}

/* 3. 导航栏：加阴影 + 黄色渐变质感（保留原黄主色） */
.navbar {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}
.navbar.bg-warning {
	background-image: linear-gradient(180deg, #ffd500 0%, #f0b400 100%) !important;
}
.navbar-brand img {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* 4. 按钮：圆角 + hover 过渡微动效 */
.btn {
	border-radius: 0.4rem;
	transition: all 0.18s ease;
}
.btn:hover {
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
	transform: translateY(-1px);
}
.btn:active {
	transform: translateY(0);
	box-shadow: none;
}

/* 5. 比赛卡片列表（matchcard）：圆角 + 阴影 + hover 高亮 */
.matchcard {
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0.5rem;
	margin-bottom: 8px;
	padding: 8px 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.18s ease;
}
.matchcard:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* 6. Bootstrap 表格：表头浅黄、行 hover 高亮 */
.table thead th {
	background-color: #ffefa0;
	color: #333;
	border-bottom: 2px solid #f0b400;
}
.table tbody tr:hover {
	background-color: #ffefb3 !important;
}

/* 7. 徽章与阶段标题标签：轻微圆角 */
.badge {
	font-weight: 500;
	border-radius: 0.35rem;
}
.titlelabel {
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   8. 对阵表（jQuery Bracket）配色
   —— 严格只改颜色值（color / background / border-color），
      不触碰任何 width / height / padding / float / position
      等布局参数，避免对阵图错位。晋级气泡(bubble)语义色保留不动。
   ============================================================ */

/* 选手框：灰底 -> 白底，更清爽 */
div.jQBracket .team {
	background-color: #ffffff;
}
/* 选手框之间的分隔线：深灰 -> 浅灰 */
div.jQBracket .team:first-child {
	border-bottom: 1px solid #cdd1d6;
}
/* 比分区域：半透明白 -> 淡黄底（白底上更醒目） */
div.jQBracket .team div.score {
	background-color: rgba(255, 213, 0, 0.16);
}
/* 胜者：淡绿底 + 深字 + 现代绿比分 */
div.jQBracket .team.win {
	background-color: #eefaf1;
	color: #1a1a1a;
}
div.jQBracket .team.win div.score {
	color: #198754;
}
/* 败者：浅灰底 + 淡字 + 现代红比分 */
div.jQBracket .team.lose {
	background-color: #f1f2f4;
	color: #9aa0a6;
}
div.jQBracket .team.lose div.score {
	color: #dc3545;
}
/* 平局比分：现代蓝 */
div.jQBracket .team.tie div.score {
	color: #0d6efd;
}
/* 无球员 / 未定 / 轮空：统一中性浅灰 */
div.jQBracket .team.np {
	background-color: #e9ecef;
	color: #6c757d;
}
div.jQBracket .team.na {
	background-color: #e9ecef;
	color: #adb5bd;
}
div.jQBracket .team.bye {
	background-color: #e2e5e9;
	color: #868e96;
}
/* 悬停高亮：浅黄（大表格里方便追踪鼠标位置） */
div.jQBracket .team:hover {
	background-color: #ffefb3;
}
/* 高亮状态：微调为站点主色系（保留原语义） */
div.jQBracket .team.highlightWinner {
	background-color: #ffd500;
	color: #000000;
}
div.jQBracket .team.highlightLoser {
	background-color: #ced4da;
	color: #000000;
}
div.jQBracket .team.highlight {
	background-color: #28a745;
	color: #000000;
}

/* ============================================================
   9. 双败对阵表：胜部/败部标题由黄底横幅改为背景水印
   —— 纯 CSS 渐进增强：现代浏览器(支持 :has)隐藏黄条并显示
      背景水印；老浏览器保留原黄条，功能不受影响。
   ============================================================ */

/* 隐藏原“胜部/败部”黄底标题所在表格行 */
tr:has(#stitle0),
tr:has(#stitle1) {
	display: none;
}

/* 对阵图容器建立相对定位，用于承载水印 */
div.jQBracket .bracket,
div.jQBracket .loserBracket {
	position: relative;
}

/* 水印公共样式：居中斜向淡色大字，不拦截鼠标 */
div.jQBracket .bracket::before,
div.jQBracket .loserBracket::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-18deg);
	font-size: 44px;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.08);
	white-space: nowrap;
	letter-spacing: 8px;
	pointer-events: none;
	z-index: 0;
}

/* 胜部水印：仅当存在败部(即双败)时显示，单败不出现 */
div.jQBracket:has(.loserBracket) .bracket::before {
	content: "胜部 Winners Bracket";
}

/* 败部水印 */
div.jQBracket .loserBracket::before {
	content: "败部 Losers Bracket";
}

/* ============================================================
   10. 对阵表页：顶部下拉框与赛程表实体之间留出间距
   —— .bracket-scroll 仅用于 bracketall.htm 对阵表页，
      安全增加上边距，不影响其他页面。
   ============================================================ */
.bracket-scroll {
	margin-top: 24px;
}

/* ============================================================
   11. 首页质感：轮播图圆角 + 二维码卡片化 + 入口按钮
   —— 仅 index.htm 元素，用 id / 属性选择器精确定位，
      不影响其他页面。
   ============================================================ */

/* 轮播大图：圆角 + 柔和投影 */
#carouselExampleSlidesOnly {
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* 二维码图：白底卡片 + 圆角 + 投影 */
img[src*="qcode.png"],
img[src*="live-score.jpg"] {
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0.5rem;
	padding: 8px;
	margin-top: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 首页三颗入口按钮：垂直间距 + 适度放大 */
a.btn.btn-warning.btn-block {
	margin-top: 12px;
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
	font-size: 1.05rem;
	font-weight: 600;
}

/* ============================================================
   12. 下拉菜单统一圆角 + 阴影（时间跳转 / 分组选择 / 组别）
   ============================================================ */
.dropdown-menu {
	border-radius: 0.5rem;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
	padding: 0.4rem 0;
}
.dropdown-menu .dropdown-item {
	border-radius: 0.35rem;
	padding: 0.45rem 1rem;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
	background-color: #ffefb3;
	color: #333;
}

/* ============================================================
   13. 比赛卡片细节：时间主题色 + 胜者比分高亮 + 国旗修正
   —— 只改颜色/圆角，不动布局，数据驱动页零风险。
      胜者比分由原红色统一为主题绿（与对阵表 win 色一致）。
   ============================================================ */
.matchcard .matchtimespan {
	color: #c28e00;
}
.matchcard .matchstatusspan .fa-check {
	color: #198754;
}
.playerscorewin {
	color: #198754;
}
.matchcard .nationalflag {
	border-color: rgba(0, 0, 0, 0.15);
}

/* ============================================================
   14. 赛段标签：badge-success → 中金底白字（金色层次·中层）
   —— mindex / pindex 入口页的赛段标签（会外赛第一场、会内赛
      Stage 1 等）。中金 #c28e00，介于亮金(titlelabel)与深金
      (badge-light)之间，白字可读。
   ============================================================ */
.badge-success {
	background-color: #c28e00;
	color: #ffffff;
}

/* ============================================================
   15. 信息/标题标签深浅分层（金色层次）
   —— badge-light 信息标签 = 深金 #b8860b（低调压底）
      titlelabel 标题/时间标签 = 亮金渐变 + 深字（醒目，呼应按钮）
      与 badge-success 中金形成「亮→中→深」三层，打破单调。
   ============================================================ */
.badge-light {
	background-color: #b8860b;
	color: #ffffff;
}
.titlelabel {
	background-image: linear-gradient(180deg, #ffd500 0%, #e6a800 100%);
	border: 1px solid #c28e00;
	color: #5c4300;
	font-weight: 600;
}

/* ============================================================
   16. 时间分隔标签：隐藏日历图标
   —— 时间标签(titlelabel)里的 fa-calendar 图标不显示，只保留
      时间文字；未定时间的 fa-question 问号图标保留不动。
   ============================================================ */
.titlelabel .fa-calendar {
	display: none;
}

/* ============================================================
   17. 男女图标配色区分
   —— 比赛卡片 gendermark 及导航/入口按钮里的 fa-male/fa-female
      图标：男=蓝 #1a73e8、女=橙红 #e8590c，一眼可辨。
   ============================================================ */
.fa-male {
	color: #1a73e8;
}
.fa-female {
	color: #e8590c;
}

/* ============================================================
   18. 按钮金色层次：亮金渐变立体感 + 深金描边
   —— btn-warning 从 Bootstrap 纯黄改为 9 号球亮金渐变，
      配深金描边与深褐字，hover 提亮、active 加深，
      与顶部导航、标题标签(titlelabel)的亮金呼应。
   ============================================================ */
.btn-warning {
	background-image: linear-gradient(180deg, #ffd500 0%, #e6a800 100%);
	border-color: #c28e00;
	color: #5c4300;
	font-weight: 600;
}
.btn-warning:hover,
.btn-warning:focus {
	background-image: linear-gradient(180deg, #ffe14d 0%, #f0b400 100%);
	border-color: #d99e00;
	color: #4a3500;
}
.btn-warning:active,
.btn-warning:not(:disabled):not(.disabled):active {
	background-image: linear-gradient(180deg, #e6a800 0%, #c28e00 100%);
	border-color: #b8860b;
	color: #3d2c00;
}
.btn-warning:focus,
.btn-warning.focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 213, 0, 0.4);
}