:root {
	--geist-mono: "Geist Mono", monospace; font-optical-sizing: auto; font-style: normal; 
}

/* Override Tailwind's default font stack with Geist */
body {
	font-family: 'Geist', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-geist {
	font-family: 'Geist', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}


.geist-mono { font-family: "Geist Mono", monospace; font-optical-sizing: auto; font-style: normal; }

/* Dot plot styles */
#dot-plot-container text { font-size: 10px; fill: #333; }
.endpoint-label { fill: #aaa; }
.tick { stroke: #ccc; }
.dot-label { text-anchor: middle; }

/* .ratings-table styles */
.ratings-table td:nth-child(2), .ratings-table td:last-child { font-family: var(--geist-mono); font-weight: 500; }

/* Quadrant game table styles */
.quad-games { font-size: 12px; width: 100%; font-weight: 500; color: rgb(107 114 128); }
.quad-games td { padding: 4px; border-bottom: 1px solid #f3f3f3; }
.opponent-net { font-size: 9px; color: #999; margin-right: 3px; font-weight: 300; }
.quad-games td:nth-child(2) { font-weight: 400; }
.quad-games td:nth-child(3) { font-weight: 400; font-family: var(--geist-mono); text-align: left; }
.w { color: #15803d; }
.l { color: #b91c1c; }

/* Ranking indicator dots */
.ranking-indicator {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-left: 8px;
	vertical-align: middle;
}

header { background-color: var(--color-husker-red); background: radial-gradient(circle, rgba(208, 0, 0, 1) 30%, rgba(155, 6, 25, 1) 100%); }

#nextGame-teams img { max-width: 24px; max-height: 24px; }

/* Color scale matching dot plot (red to yellow to light yellow) */
.rank-excellent { background-color: #e42320; }
.rank-good { background-color: #fea849; }
.rank-poor { background-color: #ffffcc; }


/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}


/* ********** GAUGE ********** */

.gauge-wrapper {
	position: relative;
	width: 340px;
	height: 340px;
	margin: 0 auto 30px;
	overflow: hidden;
}

.gauge-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.gauge-needle-container {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
	/* Smooth rotations: tuned for small bounces */
	transition: transform 500ms cubic-bezier(.22,1,.36,1);
	will-change: transform;
}

.gauge-needle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
}


.value-display {
	  --p: 20px; /* control the shape (can be percentage) */
	  height: 80px;
	  clip-path: polygon(20% 0,80% 0,100% 80%,50% 100%,0% 80%);
	font-size: 36px;
	font-weight: bold;
	color: white;
	text-align: center;
	position: relative;
	top: 250px;
	background: #000000;
	background: linear-gradient(180deg, rgba(0, 0, 0, 1) 41%, rgba(0, 0, 0, 0.47) 89%);
	padding: 10px 20px 20px 20px;
	box-shadow: 0 -5px 20px rgba(0,0,0,0.8);
	border-radius: 3px;
	border-top: 1px solid rgba(255,255,255,0.2);
	display: inline-block;
	text-shadow: 1px 1px 5px rgba(255,255,255,0.7);
	width: 120px;
	z-index: 10;
	text-shadow: 
		0 0 5px rgba(180, 0, 0, 0.6), /* Inner, brighter glow */
		0 0 15px rgba(180,0,0,0.4), /* Medium glow */
		0 0 30px rgba(180,0,0,0.2); /* Wider, softer glow */
	  font-family: 'Geist Mono', monospace;
	  animation: dashboard-pulse 1s infinite alternate; /* Optional: adds a pulsing animation */
	}
.value-display.light {
	color: black;
	top: 77%;
	font-size: 32px;
	width: 70px !important;
	height: auto !important;
	background: none !important;
	clip-path: none !important;
	padding: 0px 10px 0px 10px;
	box-shadow: none !important;
	border-radius: none !important;
	border-top: none !important;
	display: inline-block;
	text-shadow: 1px 1px 5px rgba(255,255,255,0.7);
	width: 120px;
	z-index: 10;
	text-shadow: none !important;
	font-family: 'Geist Mono', monospace;
	font-weight: 500;
	 
	}
	
	@keyframes dashboard-pulse {
	  0% {
		text-shadow: 
		  0 0 5px rgba(180, 0, 0, 0.6), 
		  0 0 15px rgba(180, 0, 0, 0.4), 
		  0 0 30px rgba(180, 0, 0, 0.2);
	  }
	  100% {
		text-shadow: 
		  0 0 8px rgba(180,0,0, 0.8), 
		  0 0 20px rgba(180,0,0, 0.6), 
		  0 0 40px rgba(180,0,0, 0.3);
	  }
	}

.angle-display {
	font-size: 12px;
	color: #ccc;
	margin: 20px 0;
	opacity: 0.9;
	font-family: 'Space Grotesk', monospace;
}

 .quad-btn.active {
	color: #991b1b;
}