/* Blok perlawanan live streaming, dipaparkan di dalam template tema sedia ada.
   Semua selector berawalan .mbls-block supaya tidak berlanggar dengan CSS tema.
   Blok ialah kad gelap tersendiri, jadi serasi dengan tema cerah atau gelap. */

.mbls-block{
	--mbls-bg:#0B0C0E;
	--mbls-surface:#17181B;
	--mbls-surface-2:#1F2124;
	--mbls-line:#2C2E32;
	--mbls-text:#F5F5F5;
	--mbls-muted:#9A9A9E;
	--mbls-gold:#FFC107;
	--mbls-gold-dim:#8A6800;
	--mbls-display:'Barlow Condensed', sans-serif;
	--mbls-mono:'IBM Plex Mono', monospace;

	box-sizing:border-box;
	width:100%;
	margin:0 0 28px;
	padding:14px;
	background:var(--mbls-bg);
	color:var(--mbls-text);
	border-radius:12px;
	font-family:inherit;
	font-size:15px;
	line-height:1.5;
	text-align:left;
}
.mbls-block *, .mbls-block *::before, .mbls-block *::after{ box-sizing:border-box; }
@media (min-width:600px){ .mbls-block{ padding:20px; } }

/* Papan skor */
.mbls-block .mbls-scoreboard{
	background:var(--mbls-surface);
	border:1px solid var(--mbls-line);
	border-radius:8px;
	padding:18px 12px;
}
.mbls-block .mbls-competition{
	display:block; text-align:center; margin-bottom:14px;
	font-family:var(--mbls-mono); font-size:11px; letter-spacing:.04em;
	color:var(--mbls-gold);
}
.mbls-block .mbls-matchup{ display:flex; align-items:center; justify-content:center; gap:10px; }
.mbls-block .mbls-team{
	flex:1; min-width:0;
	display:flex; flex-direction:column; align-items:center; gap:8px;
	text-align:center;
}
.mbls-block .mbls-team-logo{
	display:flex; align-items:center; justify-content:center;
	width:52px; height:52px;
}
@media (min-width:600px){ .mbls-block .mbls-team-logo{ width:68px; height:68px; } }
.mbls-block .mbls-team-logo img{
	display:block; width:auto; height:auto; max-width:100%; max-height:100%;
	margin:0; padding:0; border:0; border-radius:0; box-shadow:none; object-fit:contain;
}
.mbls-block .mbls-team-name{
	font-family:var(--mbls-display); font-weight:600;
	font-size:clamp(15px, 4.4vw, 21px); line-height:1.2;
	color:var(--mbls-text); word-break:break-word;
}
.mbls-block .mbls-kickoff{
	flex-shrink:0; min-width:72px; padding:8px 10px;
	background:var(--mbls-bg); border:1px solid var(--mbls-line); border-radius:6px;
	text-align:center; font-family:var(--mbls-mono);
}
.mbls-block .mbls-time{
	font-size:clamp(15px, 3.6vw, 19px); font-weight:600;
	color:var(--mbls-gold); white-space:nowrap;
}
.mbls-block .mbls-zone{ margin-top:2px; font-size:10px; letter-spacing:.06em; color:var(--mbls-muted); }

.mbls-block .mbls-meta-list{
	display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:14px;
}
.mbls-block .mbls-meta-row{
	display:flex; align-items:center; gap:6px;
	font-size:13px; color:var(--mbls-muted); text-align:center;
}
.mbls-block .mbls-meta-row svg{ width:14px; height:14px; flex-shrink:0; opacity:.85; }

.mbls-block .mbls-countdown{
	display:flex; flex-direction:column; align-items:center; gap:4px;
	margin-top:14px; padding-top:14px; border-top:1px solid var(--mbls-line);
}
.mbls-block .mbls-countdown-label{
	font-family:var(--mbls-mono); font-size:10px; letter-spacing:.08em; color:var(--mbls-muted);
}
.mbls-block .mbls-countdown-value{
	font-family:var(--mbls-mono); font-size:clamp(18px, 5.5vw, 25px);
	font-weight:600; letter-spacing:.02em; color:var(--mbls-gold);
}

/* Tajuk bahagian */
.mbls-block .mbls-title{
	margin:22px 0 10px; padding-bottom:6px;
	border-bottom:1px solid var(--mbls-line);
	font-family:var(--mbls-display); font-weight:600;
	font-size:clamp(17px, 4.2vw, 20px); line-height:1.3;
	color:var(--mbls-gold); scroll-margin-top:16px;
}

/* Player */
.mbls-block .mbls-player{
	position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden;
	background:var(--mbls-surface); border:1px solid var(--mbls-line); border-radius:8px;
}
.mbls-block .mbls-player iframe{ display:block; width:100%; height:100%; border:0; }
.mbls-block .mbls-player-poster{
	position:absolute; inset:0;
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
	background:radial-gradient(circle at 50% 40%, #24262B 0%, #0B0C0E 100%);
	background-size:cover; background-position:center;
}
.mbls-block .mbls-play-btn{
	display:flex; align-items:center; justify-content:center; flex-shrink:0;
	width:56px; height:56px; margin:0; padding:0; border:0; border-radius:50%;
	background:var(--mbls-gold); color:#0B0C0E; cursor:pointer;
}
.mbls-block .mbls-play-btn:hover{ background:#FFD24D; }
.mbls-block .mbls-play-btn svg{ display:block; width:20px; height:20px; margin-left:2px; }
.mbls-block .mbls-player-label{
	padding:0 16px; text-align:center;
	font-family:var(--mbls-mono); font-size:12px; letter-spacing:.02em; color:var(--mbls-muted);
}
.mbls-block .mbls-player-empty{
	position:absolute; inset:0;
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
	padding:20px; text-align:center;
}
.mbls-block .mbls-player-empty-text{ font-size:14px; color:var(--mbls-muted); }
.mbls-block .mbls-player-empty-link{
	display:flex; align-items:center; min-height:40px; padding:9px 16px;
	border:1px solid var(--mbls-gold-dim); border-radius:20px;
	font-family:var(--mbls-mono); font-size:12px; letter-spacing:.02em;
	color:var(--mbls-gold); text-decoration:none; cursor:pointer;
}
.mbls-block .mbls-player-empty-link:hover{ background:var(--mbls-gold); color:#0B0C0E; }

/* Saluran */
.mbls-block .mbls-channels{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.mbls-block .mbls-channel-link{
	display:flex; justify-content:space-between; align-items:center; gap:10px;
	width:100%; min-height:44px; padding:12px 14px;
	background:var(--mbls-surface); border:1px solid var(--mbls-line); border-radius:6px;
	font-size:14px; color:var(--mbls-text); text-decoration:none;
	transition:border-color .15s ease, background .15s ease;
}
.mbls-block .mbls-channel-link:hover,
.mbls-block .mbls-channel-link:active{
	border-color:var(--mbls-gold-dim); background:var(--mbls-surface-2); color:var(--mbls-text);
}
.mbls-block .mbls-badge{
	flex-shrink:0; padding:2px 8px;
	border:1px solid var(--mbls-gold-dim); border-radius:10px;
	font-family:var(--mbls-mono); font-size:11px; color:var(--mbls-gold);
}

@media (max-width:360px){
	.mbls-block .mbls-kickoff{ min-width:64px; padding:6px 8px; }
	.mbls-block .mbls-matchup{ gap:6px; }
}