* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; padding:0; background:#000007; color:#b7c9ff; font-family: 'Inter', system-ui, Arial, sans-serif; }
body { overflow: hidden; }
#bg { position:fixed; inset:0; width:100%; height:100%; display:block; }
#hud { position:fixed; top:0.75rem; left:0.75rem; display:flex; flex-direction:column; gap:0.5rem; z-index:10; font-size:0.85rem; backdrop-filter: blur(8px); background:rgba(10,16,32,0.42); padding:0.75rem 1rem; border:1px solid rgba(80,128,255,0.25); border-radius:12px; box-shadow:0 0 16px -4px rgba(0,128,255,0.35), 0 0 60px -20px rgba(0,255,255,0.3) inset; }
#clockRow {
		display: flex;
		align-items: center;
		gap: 0.7em;
		justify-content: space-between;
		width: 100%;
}
#clock { font-size:1.25rem; font-weight:600; letter-spacing:0.05em; text-shadow:0 0 8px #3af2ff, 0 0 16px #0077ff; }
#speedIndicator { 
  font-size:0.9rem; 
  font-weight:500; 
  letter-spacing:0.05em; 
  color:#ff9500; 
  text-shadow:0 0 6px #ff9500, 0 0 12px #ff6600;
  animation: speedPulse 1.5s ease-in-out infinite alternate;
	min-width: 3.5em;
	text-align: right;
	margin-left: auto;
	margin-right: 0;
	/* ALWAYS VISIBLE: Do not hide #speedIndicator via JS or CSS. */
}
@keyframes speedPulse {
  from { opacity: 0.7; }
  to { opacity: 1.0; }
}
#tripCounter {
	font-size:0.8rem;
	letter-spacing:0.08em;
	font-weight:500;
	opacity:0.92;
	background:rgba(0,32,64,0.3);
	padding:0.18rem 0.32rem;
	border:1px solid rgba(80,128,255,0.25);
	border-radius:6px;
	align-self:flex-start;
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:0.7em;
}
#fareTotal {
	font-size:0.8rem;
	letter-spacing:0.08em;
	font-weight:500;
	opacity:0.92;
	background:rgba(0,32,64,0.3);
	padding:0.18rem 0.32rem;
	border:1px solid rgba(80,128,255,0.25);
	border-radius:6px;
	align-self:flex-start;
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:0.7em;
}
.main-label {
	margin-right:0.7em;
}
.counter-pairs {
	display:flex;
	flex-direction:row;
	gap:1.1em;
}
.counter-label {
	color:#7ef;
	font-weight:700;
	margin-right:0.18em;
	text-transform:uppercase;
	font-size:0.8em;
	letter-spacing:0.09em;
}
.counter-group {
	display:inline-flex;
	align-items:center;
	gap:0.18em;
}
.counter-value {
	color:#fff;
	font-weight:700;
	min-width:2em;
	display:inline-block;
	text-align:right;
	font-size:1em;
}
#controls { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
#controls label { font-weight:500; }
#controls input[type=range] { width:240px; accent-color:#19c3ff; }
#controls button, #controls select { background:#061428; color:#dff6ff; border:1px solid #1d4d8a; padding:0.4rem 0.75rem; border-radius:6px; font-size:0.75rem; cursor:pointer; font-weight:500; letter-spacing:0.05em; }
#controls button:hover, #controls select:hover { border-color:#329dff; }
#controls button[aria-pressed=false] { background:#092348; }
#tooltip { position:fixed; pointer-events:none; background:rgba(8,20,40,0.9); color:#e9faff; font-size:0.65rem; line-height:1.4; padding:0.6rem 0.75rem; border:1px solid #1d4d8a; border-radius:8px; box-shadow:0 0 12px -2px #19c3ff, 0 0 32px -6px #0057ff inset; max-width:220px; z-index:20; transform:translate(-50%, -120%); }
#tooltip h4 { margin:0 0 0.25rem; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:#5cd8ff; }
/* Fade in and fade out for tooltip */
.fade-in { animation: fadeIn 0.3s ease forwards; }
.fade-out { animation: fadeOut 0.3s ease forwards; }
@keyframes fadeIn { from { opacity:0; transform:translateY(-6px);} to { opacity:1; transform:translateY(0);} }
@keyframes fadeOut { from { opacity:1; transform:translateY(0);} to { opacity:0; transform:translateY(-6px);} }
@media (max-width: 720px) { #controls input[type=range]{ width:160px; } }

/* Road filter panel */
#roadFilterPanel { margin-top:0.25rem; background:rgba(0,32,64,0.3); padding:0.35rem 0.5rem 0.55rem; border:1px solid rgba(80,128,255,0.25); border-radius:6px; font-size:0.65rem; line-height:1.3; max-width:200px; }
#roadFilterPanel .panel-title { font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.11em; color:#7ef; margin-bottom:0.25rem; }
.road-filter-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(80px,1fr)); gap:0.2rem 0.5rem; }
.road-filter-grid label { display:flex; align-items:center; gap:0.25rem; cursor:pointer; }
.road-filter-grid input[type=checkbox] { accent-color:#19c3ff; width:0.8rem; height:0.8rem; }
.road-filter-grid label.disabled { opacity:0.35; }