/* ---------- Base / Desktop styles ---------- */
.marquee-track{

		display:inline-flex;

		align-items:center;

		white-space:nowrap;

		will-change:transform;

    
}

body{
	margin:0;
	min-height:100vh;
	font-size:22px;
	background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url("../images/bg.png");
	background-size:cover;
	background-position:center;
	background-attachment:fixed;
	display:flex;
	flex-direction:column;
	align-items:center;
}

.pageContent{
	width:100%;
	display:flex;
	justify-content:center;
}

.eventsContainer{
	background:#0a0a12;
	border:8px solid #2b2b2b;
	padding:14px;
	color:#f5c542;
	font-family:'Courier New', monospace;
	width:min(95vw,900px);
	box-shadow: inset 0 0 25px #000;
	box-sizing:border-box;
}

/* compact filter buttons (desktop & default) */
.filterBtn{
	background:#111;
	color:#f5c542;
	border:2px solid #333;
	height:88px;
	min-width:120px;
	font-size:24px;
	font-weight:900;
	border-radius:14px;
	padding:0 24px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}

.activeBtn{
	background:#f5c542;
	color:black;
	border:2px solid #f5c542;
	box-shadow:0 0 8px #f5c542;
}

/* layout helpers */
div[style*="background:#0a0a12"][style*="border:8px"]{ box-sizing:border-box; }
#adContainer{ margin-bottom:14px; border:2px solid #444; box-shadow: inset 0 0 10px #000; overflow:hidden; }
#adImage{ width:100%; height:auto; display:block; }

.cell{ overflow:hidden; white-space:nowrap; display:flex; align-items:center; height:65px; padding:0 10px; box-sizing:border-box; font-size:24px; font-weight:600; line-height:1.4; }
.scrollViewport{
		flex:1;
		overflow:hidden;
		position:relative;
		white-space:nowrap;
}

.scrollText{
		display:inline-block;
		white-space:nowrap;
		will-change:transform;
}

/* BAR / LOCATION: never wrap in the third column of the 3-column grids */
div[style*="grid-template-columns:95px 2.2fr 1.5fr"] > div:last-child {
	white-space:nowrap;
	overflow:visible;
}

/* ensure event rows keep the same height */
div[style*="grid-template-columns:95px 2.2fr 1.5fr"]{
	align-items:center;
	box-sizing:border-box;
	height:65px;
	min-height:65px;
	max-height:65px;
}
.liveDot{ width:12px; height:12px; background:#00ff66; border-radius:50%; margin-right:10px; animation:pulse 1.4s infinite; flex-shrink:0; }

.statusDot{
	display:inline-block;
	font-size:14px;
	margin-right:8px;
	vertical-align:middle;
}

.statusDotLive{
	font-size:12px;
}

.livePulseDot{
	display:inline-block;
	width:10px;
	height:10px;
	border-radius:50%;
	background:#00ff66;
	animation:livePulse 1.5s ease-in-out infinite;
	vertical-align:middle;
}

.statusDotStarting{
	font-size:14px;
	color:#ffcc4d;
}

.rowFinished{
    opacity:0.65;
}

@keyframes livePulse{
	0%, 100%{ opacity:0.45; transform:scale(0.9); }
	50%{ opacity:1; transform:scale(1); }
}

@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(0,255,100,0.7); } 70%{ box-shadow:0 0 0 8px rgba(0,255,100,0); } 100%{ box-shadow:0 0 0 0 rgba(0,255,100,0); } }

/* ensure responsive containers */
*{ max-width:100%; }
html,body{ max-width:100%; overflow-x:hidden; }

/* ---------- Single Mobile Block ---------- */
@media (max-width:768px){

	/* base adjustments */
	body{ font-size:24px; }
	html{ overflow-x:hidden; }

	/* keep compact filter buttons on mobile */
	.filterBtn{ height:92px !important; min-height:92px !important; font-size:28px !important; border-radius:16px !important; padding:0 26px !important; font-weight:900 !important; letter-spacing:1px !important; }

	/* banner */
	#adContainer{ width:95% !important; max-width:95% !important; margin:0 auto 18px; }

	/* table / grid headers */
	table{ width:100%; font-size:24px !important; }
	th{ font-size:26px !important; font-weight:700; padding:16px 8px !important; }
	td{ font-size:24px !important; padding:16px 8px !important; line-height:1.5; }
	tr{ height:70px; }

	/* header labels (today & clock) */
	#todayLabel{ font-size:28px !important; font-weight:700 !important; }
	#clock{ font-size:28px !important; font-weight:700 !important; }

	/* trend / highlight box */
	#trendBox{ font-size:26px !important; font-weight:700 !important; padding:12px 0 !important; }

	/* legend */
	div[style*="display:flex"][style*="gap:8px"]{ font-size:24px !important; font-weight:700 !important; padding:14px !important; }
	div[style*="display:flex"][style*="gap:8px"] > div, div[style*="display:flex"][style*="gap:8px"] > span{ font-size:24px !important; font-weight:700 !important; }

	/* event list sizing */
	#rows{ font-size:20px !important; }
	#rows .cell{ font-size:24px !important; line-height:1.35 !important; font-weight:700 !important; min-height:70px !important; height:70px !important; }
	#rows > div[style*="grid-template-columns:95px 2.2fr 1.5fr"]{ min-height:70px !important; height:70px !important; max-height:70px !important; }
	#rows > div[style*="grid-template-columns:95px 2.2fr 1.5fr"] > div:first-child{ font-size:24px !important; font-weight:700 !important; min-height:70px !important; display:flex !important; align-items:center !important; }

	/* grid header visual parity */
	div[style*="grid-template-columns:100px"]{ font-size:28px !important; font-weight:900 !important; color:#f5c542 !important; }

	.activeBtn{ font-weight:900 !important; }

}

.missed {
    font-size: 18px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    display: inline-block !important;
}