/**
 * 前端樣式。
 *
 * 刻意用中性配色與 currentColor，讓它在多數佈景主題下都不突兀；
 * 顏色一律走 CSS 變數，方便佈景主題覆寫。
 */

.wls-wrap {
	--wls-border: rgba( 0, 0, 0, 0.12 );
	--wls-surface: rgba( 0, 0, 0, 0.015 );
	--wls-muted: rgba( 0, 0, 0, 0.55 );
	--wls-live: #d63638;
	--wls-live-soft: rgba( 214, 54, 56, 0.08 );
	--wls-radius: 10px;

	/* 各聯盟識別色（深色配白字），卡片徽章與分頁 tab 皆共用。 */
	--wls-league-mlb: #14532d;
	--wls-league-cpbl: #1e3a5f;
	--wls-league-nba: #7f1d1d;

	/* 卡片變窄時要一起縮的尺寸，集中在這裡由斷點覆寫。 */
	--wls-logo: 32px;
	--wls-score: 1.4em;

	margin: 0 0 1.5em;
	font-size: 15px;
	line-height: 1.5;
}

/* ---------- 篩選搜尋列 ---------- */

.wls-filter {
	margin-bottom: 14px;
	padding: 12px;
	border: 1px solid var( --wls-border );
	border-radius: var( --wls-radius );
	background: var( --wls-surface );
}

.wls-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.wls-field {
	font: inherit;
	font-size: 14px;
	padding: 7px 10px;
	border: 1px solid var( --wls-border );
	border-radius: 6px;
	background: transparent;
	color: inherit;
	min-width: 0;
}

/*
 * 搜尋隊伍與賽事狀態鄰近同行、各半寬 —— 手機版也維持雙欄並列，
 * 而不是像其他欄位那樣整行堆疊。
 */
.wls-field-pair {
	display: flex;
	gap: 8px;
	flex: 1 1 240px;
}

.wls-field-pair > .wls-field {
	flex: 1 1 50%;
	min-width: 0;
}

.wls-field-dates {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto;
}

.wls-field-date {
	flex: 1 1 130px;
	font-size: 14px !important;
    padding: .5rem !important;
}

.wls-dash {
	color: var( --wls-muted );
}

.wls-btn {
	font: inherit;
	font-size: 14px;
	padding: .5rem 1.5rem;
	font-weight: bold;
	border: 1px solid currentColor;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	white-space: nowrap;
}

.wls-btn:hover,
.wls-btn:focus-visible {
	opacity: 0.75;
}

.wls-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.wls-chip {
	font: inherit;
	font-size: 0.8em;
	padding: 4px 12px;
	border: 1px solid var( --wls-border );
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.wls-chip.is-active {
	border-color: currentColor;
	font-weight: 700;
}

.wls-chip-reset {
	margin-inline-start: auto;
	color: var( --wls-muted );
}

/* ---------- 清單與日期分組 ---------- */

.wls-games {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* minmax(0,1fr) 而非 1fr：超長隊名才不會把欄寬撐破。 */
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 10px;
}

/* 日期標題與空狀態橫跨整列，日期分組才看得出來。 */
.wls-date-header,
.wls-empty {
	grid-column: 1 / -1;
}

.wls-date-header {
	margin: 6px 0 0;
	font-size: 0.85em;
	font-weight: 700;
	color: var( --wls-muted );
	letter-spacing: 0.02em;
	display: flex;
	align-items: center;
	gap: 10px;
}

.wls-date-header::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var( --wls-border );
}

.wls-date-header:first-child {
	margin-top: 0;
}

/* ---------- 賽事卡片 ---------- */

.wls-game {
	position: relative;
	border: 1px solid var( --wls-border );
	border-radius: var( --wls-radius );
	padding: 14px 16px;
	display: grid;
	align-content: start;
	gap: 12px;
	background: var( --wls-surface );
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wls-game:hover {
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.07 );
}

/* 進行中的比賽：左側強調色邊條，一眼分得出來 */
.wls-game.wls-status-live {
	border-color: var( --wls-live );
	background: var( --wls-live-soft );
}

/*
 * 色條用偽元素而不是加粗邊框：加粗會讓這張卡片比同列其他卡片多 3px，
 * 網格因此對不齊。
 */
.wls-game.wls-status-live::before {
	content: "";
	position: absolute;
	inset-block: -1px;
	inset-inline-start: -1px;
	width: 4px;
	background: var( --wls-live );
	border-start-start-radius: var( --wls-radius );
	border-end-start-radius: var( --wls-radius );
	pointer-events: none;
}

.wls-game.wls-status-final {
	opacity: 0.92;
}

.wls-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var( --wls-muted );
}

/* 徽章樣式，底色依聯盟區分（見下方各聯盟規則）。 */
.wls-league {
	font-size: .9em;
	padding: 1px 8px;
	border-radius: 5px;
	background: var( --wls-border );
}

.wls-league[data-league="mlb"] {
	background: var( --wls-league-mlb );
	color: #fff;
}

.wls-league[data-league="cpbl"] {
	background: var( --wls-league-cpbl );
	color: #fff;
}

.wls-league[data-league="nba"] {
	background: var( --wls-league-nba );
	color: #fff;
}

.wls-time {
	font-variant-numeric: tabular-nums;
}

.wls-spacer {
	flex: 1 1 auto;
}

/*
 * 場地資訊獨立成一行：flex-basis:100% 的子元素在 flex-wrap 容器裡
 * 必定自成一行，只要它排在 .wls-meta 的最後（見 render_game()），
 * 就不會打斷「聯盟／時間／狀態」那一行的排列。所有裝置寬度都要顯示，
 * 不再像舊版那樣在手機寬度隱藏。
 */
.wls-venue {
	flex: 1 0 100%;
}

/* 「賽事進行中」標籤 */
.wls-live-badge {
	background: var( --wls-live );
	color: #fff;
	font-weight: 700;
	font-size: 0.95em;
	padding: 2px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.wls-status-text.is-live {
	color: var( --wls-live );
	font-weight: 700;
}

.wls-status-text.is-live::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-inline-end: 5px;
	border-radius: 50%;
	background: var( --wls-live );
	vertical-align: middle;
	animation: wls-pulse 1.6s ease-in-out infinite;
}

@keyframes wls-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

@media ( prefers-reduced-motion: reduce ) {
	.wls-status-text.is-live::before {
		animation: none;
	}
}

/* ---------- 對戰與比分 ---------- */

/* 兩隊上下排列：窄卡片放不下左右對稱的版面。 */
.wls-teams {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 6px;
}

.wls-team {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.wls-logo {
	width: var( --wls-logo );
	height: var( --wls-logo );
	object-fit: contain;
	flex: none;
}

.wls-team-name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.wls-score {
	font-size: var( --wls-score );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	flex: none;
	transition: color 0.3s ease;
}

.wls-score-changed {
	color: var( --wls-live );
}

/*
 * 上下排列後不需要顯示分隔符，但節點要留著：JS 會在 ':' 與 'vs' 之間切換它，
 * 螢幕閱讀器仍會讀到「有沒有比分」。不能用 display:none（脫離無障礙樹）
 * 或 visibility:hidden（留下空的網格列）。
 */
.wls-vs {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* 卡片的最後一列，不再絕對定位以免疊到 .wls-meta。 */
.wls-manual {
	justify-self: end;
	font-size: 0.68em;
	color: var( --wls-muted );
	border: 1px solid var( --wls-border );
	border-radius: 999px;
	padding: 1px 8px;
}

/* ---------- 底部 ---------- */

.wls-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	font-size: 14px;
	color: var( --wls-muted );
}

.wls-btn-more {
	margin-inline-start: auto;
}

.wls-empty {
	color: var( --wls-muted );
	padding: 24px 0;
	margin: 0;
	text-align: center;
	list-style: none;
}

.wls-wrap.is-loading .wls-games,
.wls-panel.is-loading .wls-games {
	opacity: 0.45;
	pointer-events: none;
}

/* ---------- 分頁列 ---------- */

.wls-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin-bottom: 14px;
	border-block-end: 1px solid var( --wls-border );
}

.wls-tab {
	font: inherit;
	font-size: 0.9em;
	padding: 9px 18px;
	border: 1px solid transparent;
	border-block-end: none;
	border-start-start-radius: 8px;
	border-start-end-radius: 8px;
	background: transparent;
	color: var( --wls-muted );
	cursor: pointer;
	/* 分頁列本身壓在容器邊框上，選取的那頁才能與內容連成一片。 */
	margin-block-end: -1px;
}

.wls-tab:hover {
	color: inherit;
}

.wls-tab[aria-selected="true"] {
	border-color: var( --wls-border );
	background: var( --wls-surface );
	color: inherit;
	font-weight: 700;
}

/* 作用中分頁套上聯盟識別色，混合聯盟時一眼看出目前在哪個分頁。 */
.wls-tabs .wls-tab.is-active[data-wls-tab="mlb"] {
	background-color: var( --wls-league-mlb );
	color: #FFF;
}

.wls-tabs .wls-tab.is-active[data-wls-tab="cpbl"] {
	background-color: var( --wls-league-cpbl );
	color: #FFF;
}

.wls-tabs .wls-tab.is-active[data-wls-tab="nba"] {
	background-color: var( --wls-league-nba );
	color: #FFF;
}

.wls-tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* 防禦某些佈景主題對 div 的 display 覆寫，讓 hidden 屬性確實生效。 */
.wls-panel[hidden] {
	display: none;
}

/* ---------- 平板：三欄 ---------- */

@media ( max-width: 1199px ) {
	.wls-games {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/* ---------- 窄視窗：兩欄 ---------- */

@media ( max-width: 781px ) {
	.wls-wrap {
		--wls-logo: 28px;
		--wls-score: 1.25em;
	}

	.wls-games {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.wls-game {
		padding: 12px 14px;
		gap: 10px;
	}
}

/*
 * 手機：只調整介面密度，不再改變欄數。
 * 782px 管的是「一列塞得下幾張卡」，600px 管的是「過濾列夠不夠寬」，
 * 兩者合併會讓 700px 的平板被迫把過濾列疊成一欄。
 */

@media ( max-width: 600px ) {
	.wls-wrap {
		--wls-logo: 24px;
		--wls-score: 1.1em;
	}

	.wls-filter {
		padding: 10px;
	}

	/*
	 * 搜尋隊伍＋賽事狀態這一組整體佔滿一行，但內部仍維持雙欄並列
	 * （見 .wls-field-pair > .wls-field 的 flex:1 1 50%），不堆疊成兩整行。
	 */
	.wls-field-pair,
	.wls-field-dates {
		flex: 1 1 100%;
	}

	.wls-btn-search {
		flex: 1 1 auto;
	}

	.wls-game {
		padding: 10px 12px;
		gap: 8px;
	}

	.wls-meta {
		gap: 6px;
	}

	.wls-team-name {
		font-size: 0.85em;
	}

	.wls-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.wls-tab {
		flex: none;
		padding: 8px 12px;
	}

	.wls-chip-reset {
		margin-inline-start: 0;
	}
}

/* 320px 的手機分兩欄只剩約 140px，改回單欄。 */

@media ( max-width: 380px ) {
	.wls-games {
		grid-template-columns: 1fr;
	}
}