/* KhelaPulse Live Score — Public / Frontend Styles */

.kp-live-wrapper {
	--kp-bg: #ffffff;
	--kp-card-bg: #ffffff;
	--kp-border: #e5e7eb;
	--kp-text: #1a1a1a;
	--kp-muted: #6b7280;
	--kp-accent: #16a34a;
	--kp-live: #dc2626;
	--kp-upcoming: #2563eb;
	--kp-finished: #6b7280;
	--kp-halftime: #d97706;
	--kp-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
	max-width: 100%;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.kp-live-wrapper * {
	box-sizing: border-box;
}

/* ---- Dark mode: auto via OS preference ---- */
@media (prefers-color-scheme: dark) {
	.kp-live-wrapper:not(.kp-force-light) {
		--kp-bg: #0f1115;
		--kp-card-bg: #191c22;
		--kp-border: #2b2f38;
		--kp-text: #f3f4f6;
		--kp-muted: #9ca3af;
		--kp-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
}

/* ---- Dark mode: forced via plugin setting ---- */
.kp-live-wrapper.kp-force-dark {
	--kp-bg: #0f1115;
	--kp-card-bg: #191c22;
	--kp-border: #2b2f38;
	--kp-text: #f3f4f6;
	--kp-muted: #9ca3af;
	--kp-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.kp-section {
	margin-bottom: 32px;
}

.kp-section-title {
	color: var(--kp-text);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 14px;
}

.kp-empty {
	color: var(--kp-muted);
	font-style: italic;
}

.kp-cards-grid {
	display: grid;
	grid-template-columns: repeat(var(--kp-cards-per-row, 3), 1fr);
	gap: 18px;
}

@media (max-width: 992px) {
	.kp-cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.kp-cards-grid {
		grid-template-columns: 1fr;
	}
}

.kp-card {
	background: var(--kp-card-bg);
	border: 1px solid var(--kp-border);
	border-radius: 12px;
	box-shadow: var(--kp-shadow);
	padding: 16px;
	color: var(--kp-text);
	transition: transform .15s ease, box-shadow .15s ease;
}

.kp-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

.kp-card.kp-status-live {
	border-color: var(--kp-live);
}

.kp-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	gap: 8px;
}

.kp-tournament {
	font-size: 12px;
	color: var(--kp-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 60%;
}

.kp-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--kp-border);
	color: var(--kp-text);
	white-space: nowrap;
}

.kp-badge.kp-status-live {
	background: var(--kp-live);
	color: #fff;
}

.kp-badge.kp-status-upcoming {
	background: var(--kp-upcoming);
	color: #fff;
}

.kp-badge.kp-status-finished {
	background: var(--kp-finished);
	color: #fff;
}

.kp-badge.kp-status-halftime {
	background: var(--kp-halftime);
	color: #fff;
}

.kp-live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	display: inline-block;
	animation: kp-pulse 1.2s infinite;
}

@keyframes kp-pulse {
	0% { opacity: 1; transform: scale(1); }
	50% { opacity: .4; transform: scale(1.3); }
	100% { opacity: 1; transform: scale(1); }
}

.kp-card-body {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.kp-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
}

.kp-team-logo {
	width: 42px;
	height: 42px;
	object-fit: contain;
	border-radius: 50%;
	background: var(--kp-border);
}

.kp-team-name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kp-team-score {
	font-size: 16px;
	font-weight: 700;
	color: var(--kp-accent);
}

.kp-team-score small {
	font-weight: 400;
	color: var(--kp-muted);
	font-size: 11px;
}

.kp-vs {
	font-size: 12px;
	font-weight: 700;
	color: var(--kp-muted);
	text-align: center;
}

.kp-minute {
	color: var(--kp-live);
	font-weight: 700;
}

.kp-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12px;
	color: var(--kp-muted);
	border-top: 1px dashed var(--kp-border);
	padding-top: 8px;
	margin-bottom: 8px;
}

.kp-possession {
	margin-bottom: 10px;
}

.kp-possession-label {
	font-size: 11px;
	color: var(--kp-muted);
	text-transform: uppercase;
	letter-spacing: .03em;
}

.kp-possession-bar {
	display: flex;
	height: 6px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--kp-border);
	margin: 4px 0;
}

.kp-possession-a {
	background: var(--kp-accent);
	height: 100%;
}

.kp-possession-b {
	background: var(--kp-upcoming);
	height: 100%;
}

.kp-possession-values {
	font-size: 11px;
	color: var(--kp-muted);
}

.kp-card-footer {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 11px;
	color: var(--kp-muted);
	border-top: 1px solid var(--kp-border);
	padding-top: 8px;
	flex-wrap: wrap;
}

.kp-result {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--kp-accent);
	background: rgba(22,163,74,0.1);
	padding: 6px 10px;
	border-radius: 6px;
	text-align: center;
}

/* Refresh fade transition */
.kp-live-refresh-target.kp-refreshing {
	opacity: 0.55;
	transition: opacity .2s ease;
}