/*
 * SerpCaptain GOL front-end blocks.
 * Matches the direttasport24 theme system: dark ground (#0d0d0d/#1a1a1a),
 * card #242424, accent green #00c853, Inter, border #333.
 */

.scgl-block {
	margin: 1.5rem 0;
}

figure.scgl-block {
	padding: 0;
}

.scgl-caption {
	font-weight: 700;
	font-size: 0.95rem;
	color: var( --text-white, #ffffff );
	margin-bottom: 0.6rem;
}

.scgl-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.scgl-table {
	width: 100%;
	border-collapse: collapse;
	background: var( --card-bg, #242424 );
	border: 1px solid var( --border-color, #333333 );
	border-radius: 8px;
	overflow: hidden;
	font-size: 0.92rem;
}

.scgl-table th,
.scgl-table td {
	padding: 0.55rem 0.7rem;
	text-align: left;
	border-bottom: 1px solid var( --border-color, #333333 );
	color: var( --text-white, #ffffff );
	white-space: nowrap;
}

.scgl-table tr:last-child td {
	border-bottom: none;
}

.scgl-table thead th {
	background: var( --secondary-bg, #1a1a1a );
	color: var( --text-gray, #b0b0b0 );
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.scgl-table .num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.scgl-muted {
	color: var( --text-gray, #b0b0b0 );
}

/* Match tables: a FIXED column grid shared by every league section, so the
   status, score and bet columns align vertically across the whole board
   (each league renders as its own table — without fixed layout every table
   computed its own widths and the buttons drifted). */
.scgl-matches {
	table-layout: fixed;
}

.scgl-matches .scgl-status {
	width: 78px;
	color: var( --text-gray, #b0b0b0 );
	font-size: 0.8rem;
}

.scgl-matches .scgl-score {
	width: 118px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	position: relative;
}

.scgl-matches.scgl-has-aff .scgl-aff {
	width: 128px;
}

.scgl-matches .scgl-home,
.scgl-matches .scgl-away {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.scgl-matches .scgl-home {
	text-align: right;
}

/* Zebra rows + hover: each fixture reads as its own strip, so the aligned
   buttons never visually merge into one column of floating pills. */
.scgl-matches tbody tr:nth-child( even ) td {
	background: rgba( 255, 255, 255, 0.025 );
}

.scgl-matches tbody tr:hover td {
	background: rgba( 0, 200, 83, 0.07 );
}

/* Winner emphasis on finished matches. */
.scgl-matches .scgl-win {
	font-weight: 700;
	color: var( --text-white, #ffffff );
}

/* Scoreboard chip: score (or kickoff time) in a consistent pill, so the
   center column has one steady visual anchor in every row. */
.scgl-score-chip {
	display: inline-block;
	min-width: 58px;
	padding: 0.14rem 0.55rem;
	border-radius: 6px;
	background: var( --secondary-bg, #1a1a1a );
	border: 1px solid var( --border-color, #333333 );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.scgl-chip-live {
	color: var( --accent-green, #00c853 );
	border-color: var( --accent-green, #00c853 );
}

.scgl-chip-scheduled {
	color: var( --text-gray, #b0b0b0 );
	font-weight: 600;
}

.scgl-chip-other {
	color: var( --text-light-gray, #888888 );
}

/* Half-time score, anchored to the cell edge so the score chip itself stays
   perfectly centered in every row. */
.scgl-ht {
	position: absolute;
	right: 2px;
	top: 50%;
	transform: translateY( -50% );
	color: var( --text-light-gray, #888888 );
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
}

.scgl-badge {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
	font-size: 0.72rem;
	font-weight: 700;
	background: var( --secondary-bg, #1a1a1a );
	color: var( --text-gray, #b0b0b0 );
}

.scgl-badge-live {
	background: var( --accent-green, #00c853 );
	color: #06210f;
	animation: scgl-pulse 2s infinite;
}

.scgl-badge-finished {
	background: var( --secondary-bg, #1a1a1a );
	color: var( --text-white, #ffffff );
}

@keyframes scgl-pulse {
	50% {
		opacity: 0.75;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.scgl-badge-live {
		animation: none;
	}
}

.scgl-league {
	margin: 0 0 1.4rem;
}

.scgl-league-name {
	font-size: 1rem;
	font-weight: 700;
	color: var( --text-white, #ffffff );
	margin: 0 0 0.5rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var( --accent-green, #00c853 );
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.scgl-flag {
	border-radius: 2px;
	flex: 0 0 auto;
}

.scgl-aff a {
	display: block;
	text-align: center;
	background: var( --accent-green, #00c853 );
	color: #06210f;
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	padding: 0.3rem 0.55rem;
	border-radius: 5px;
	text-decoration: none;
}

.scgl-aff a:hover {
	background: var( --accent-green-hover, #00e676 );
}

.scgl-expand {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var( --secondary-bg, #1a1a1a );
	color: var( --accent-green, #00c853 );
	border: 1px solid var( --border-color, #333333 );
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
}

.scgl-expand:hover {
	border-color: var( --accent-green, #00c853 );
}

.scgl-card {
	background: var( --card-bg, #242424 );
	border: 1px solid var( --border-color, #333333 );
	border-left: 3px solid var( --accent-green, #00c853 );
	border-radius: 8px;
	padding: 1rem 1.2rem;
}

.scgl-kicker {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var( --accent-green, #00c853 );
	margin: 0 0 0.3rem;
}

.scgl-card-title {
	margin: 0 0 0.35rem;
	font-size: 1.25rem;
	color: var( --text-white, #ffffff );
}

.scgl-card-meta {
	margin: 0 0 0.3rem;
	color: var( --text-gray, #b0b0b0 );
	font-size: 0.9rem;
}

.scgl-tv {
	margin: 0.4rem 0;
	color: var( --text-white, #ffffff );
}

.scgl-countdown {
	font-variant-numeric: tabular-nums;
	color: var( --accent-green, #00c853 );
	font-weight: 600;
	margin: 0.3rem 0 0;
}

.scgl-updated,
.scgl-note {
	color: var( --text-light-gray, #888888 );
	font-size: 0.78rem;
	margin: 0.5rem 0 0;
}

.scgl-empty {
	color: var( --text-gray, #b0b0b0 );
	background: var( --card-bg, #242424 );
	border: 1px dashed var( --border-color, #333333 );
	border-radius: 8px;
	padding: 0.8rem 1rem;
	font-size: 0.92rem;
}

@media ( max-width: 640px ) {
	.scgl-table {
		font-size: 0.82rem;
	}

	.scgl-table th,
	.scgl-table td {
		padding: 0.45rem 0.4rem;
	}

	.scgl-matches .scgl-status {
		width: 56px;
		white-space: normal;
		line-height: 1.25;
	}

	.scgl-badge {
		font-size: 0.62rem;
		padding: 0.08rem 0.3rem;
	}

	.scgl-matches .scgl-score {
		width: 92px;
	}

	.scgl-score-chip {
		min-width: 46px;
		padding: 0.1rem 0.4rem;
	}

	.scgl-ht {
		display: none;
	}

	.scgl-aff {
		display: none;
	}
}