/* =========================================================
   Opole United — Mecze
   Prefiks oum- celowo: klasy .ou-logo i .ou-btn sa juz zajete
   przez pasek sponsorow i hero, nie mozemy w nie wejsc.
   ========================================================= */

.oum-grid{
	display:grid;
	grid-template-columns:repeat(var(--oum-cols,2), minmax(0,1fr));
	gap:24px;
	max-width:1140px;
	margin:24px auto;
	padding:0 16px;
	align-items:start;
}
.oum-empty{
	max-width:520px;margin:24px auto;padding:18px;text-align:center;
	font-family:'Poppins',sans-serif;color:#b5b5b8;
}

.oum-card{
	--accent:#F6551C;
	--accent-soft:rgba(246,85,28,.15);
	position:relative;
	overflow:hidden;
	min-width:0;
	padding:28px 24px;
	border-radius:20px;
	text-align:center;
	color:#fff;
	font-family:'Poppins',sans-serif;
	background:linear-gradient(160deg,rgba(28,28,30,.85),rgba(12,12,14,.9));
	border:1px solid rgba(255,255,255,.08);
	backdrop-filter:blur(16px) saturate(120%);
	-webkit-backdrop-filter:blur(16px) saturate(120%);
	box-shadow:0 20px 50px rgba(0,0,0,.55);
	transition:transform .35s ease, box-shadow .35s ease;
}
.oum-card::before{
	content:"";
	position:absolute;
	inset:-50%;
	background:radial-gradient(circle at 30% 20%,rgba(246,85,28,.22),transparent 55%);
	animation:oumGlow 8s linear infinite;
	pointer-events:none;
}
@keyframes oumGlow{
	0%{transform:translate(0,0) rotate(0deg)}
	50%{transform:translate(30px,20px) rotate(180deg)}
	100%{transform:translate(0,0) rotate(360deg)}
}
.oum-card--past{ opacity:.96 }
.oum-card--past::before{ animation:none; opacity:.5 }

.oum-badge{
	position:relative;
	display:inline-block;
	margin-bottom:20px;
	padding:5px 14px;
	font-size:11px;
	font-weight:700;
	letter-spacing:2px;
	text-transform:uppercase;
	color:var(--accent);
	background:var(--accent-soft);
	border:1px solid rgba(246,85,28,.35);
	border-radius:999px;
}

.oum-teams{
	position:relative;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	gap:20px;
	margin-bottom:22px;
}
.oum-team{
	flex:1 1 0;
	min-width:0;
	max-width:170px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
}
.oum-logo{
	width:74px;
	height:74px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.12);
	box-shadow:inset 0 0 20px rgba(255,255,255,.05);
	flex:0 0 auto;
}
.oum-logo img{
	max-width:52px;
	max-height:52px;
	width:auto;
	height:auto;
	object-fit:contain;
}
.oum-team-name{
	font-size:13px;
	font-weight:600;
	line-height:1.3;
	letter-spacing:.3px;
	overflow-wrap:anywhere;
}
.oum-vs{
	align-self:center;
	flex:0 0 auto;
	font-size:20px;
	font-weight:800;
	font-style:italic;
	color:var(--accent);
	text-shadow:0 0 12px rgba(246,85,28,.5);
}
.oum-score{
	font-style:normal;
	font-size:26px;
	letter-spacing:1px;
	color:#fff;
	font-variant-numeric:tabular-nums;
}

.oum-meta{ position:relative; margin-bottom:22px }
.oum-date{ font-size:15px; font-weight:600; margin-bottom:4px }
.oum-venue{ font-size:12.5px; color:#b5b5b8; line-height:1.4 }

.oum-countdown{
	position:relative;
	display:flex;
	justify-content:center;
	gap:10px;
	margin-bottom:24px;
	min-height:62px;
}
.oum-count-box{
	display:flex;
	flex-direction:column;
	align-items:center;
	min-width:60px;
	padding:10px 6px;
	border-radius:12px;
	background:rgba(255,255,255,.05);
	border:1px solid rgba(246,85,28,.4);
	box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.oum-count-num{
	font-size:24px;
	font-weight:700;
	line-height:1;
	color:#fff;
	font-variant-numeric:tabular-nums;
}
.oum-count-lbl{
	margin-top:5px;
	font-size:10px;
	font-weight:600;
	letter-spacing:1px;
	text-transform:uppercase;
	color:var(--accent);
}
.oum-live{
	display:flex;align-items:center;justify-content:center;
	font-size:16px;
	font-weight:700;
	color:var(--accent);
}

.oum-actions{
	position:relative;
	display:flex;
	justify-content:center;
	gap:12px;
	flex-wrap:wrap;
}
.oum-btn{
	display:inline-block;
	padding:11px 26px;
	font-size:14px;
	font-weight:600;
	color:#fff !important;
	text-decoration:none;
	border-radius:12px;
	background:linear-gradient(135deg,#F6551C,#ff7a45);
	box-shadow:0 8px 24px rgba(246,85,28,.4);
	transition:transform .2s ease, box-shadow .2s ease;
}
.oum-btn--alt{
	background:transparent;
	border:1px solid var(--accent);
	box-shadow:none;
}

@media (hover:hover){
	.oum-card:hover{
		transform:translateY(-4px);
		box-shadow:0 28px 70px rgba(0,0,0,.7),0 0 0 1px rgba(246,85,28,.35);
	}
	.oum-btn:hover,.oum-btn:focus{
		color:#fff !important;
		transform:translateY(-2px);
		box-shadow:0 12px 30px rgba(246,85,28,.55);
	}
	.oum-btn--alt:hover,.oum-btn--alt:focus{
		background:var(--accent-soft);
		box-shadow:0 8px 22px rgba(246,85,28,.3);
	}
}

@media (max-width:900px){
	.oum-grid{ grid-template-columns:1fr; gap:18px }
}
@media (max-width:480px){
	.oum-grid{ padding:0 12px; margin:14px auto }
	.oum-card{ padding:22px 16px }
	.oum-teams{ gap:10px }
	.oum-logo{ width:60px; height:60px }
	.oum-logo img{ max-width:42px; max-height:42px }
	.oum-team-name{ font-size:11.5px }
	.oum-vs{ font-size:16px }
	.oum-score{ font-size:21px }
	.oum-count-box{ min-width:52px; padding:8px 4px }
	.oum-count-num{ font-size:20px }
	.oum-btn{ padding:10px 20px; font-size:13px }
}

@media (prefers-reduced-motion:reduce){
	.oum-card::before{ animation:none }
	.oum-card,.oum-btn{ transition:none }
}