:root {
	--bg1: #071127;
	--bg2: #052033;
	--accent: #60a5fa;
	--good: #16a34a;
	--warn: #f59e0b;
	--bad: #ef4444;
	--glass: rgba(255, 255, 255, 0.04);
	--muted: #9fb0c8;
}

html,
body {
	height: 100%;
	margin: 0;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
	background: linear-gradient(180deg, var(--bg1), var(--bg2));
	color: #e6eef8;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* full stage */
.stage {
	position: fixed;
	inset: 0;
	overflow: hidden;
	display: flex;
	gap: 18px;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 18px;
	box-sizing: border-box;
	pointer-events: auto;
}

/* follower */
.follower {
	position: fixed;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1);
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.65) 10%, var(--accent) 40%);
	box-shadow: 0 8px 30px rgba(2, 6, 23, 0.6), 0 6px 18px rgba(96, 165, 250, 0.12);
	pointer-events: none;
	transition: transform 60ms linear, opacity 160ms ease-out;
	z-index: 50;
	mix-blend-mode: screen;
}

/* info card */
.card {
	min-width: 300px;
	max-width: 420px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
	border-radius: 12px;
	padding: 14px;
	box-shadow: 0 6px 24px rgba(2, 6, 23, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.04);
	color: var(--muted);
	z-index: 60;
	backdrop-filter: blur(6px) saturate(120%);
}

.card h2 {
	margin: 0 0 6px 0;
	color: #e6eef8;
	font-size: 16px;
	font-weight: 600;
}

.row {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;
}

.pill {
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 13px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.02);
	color: var(--muted);
}

.big-score {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	margin-left: auto;
}

.coords {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
	font-size: 13px;
	color: #dff1ff;
	background: rgba(0, 0, 0, 0.12);
	padding: 8px;
	border-radius: 8px;
	margin-bottom: 8px;
	overflow: auto;
}

.status {
	padding: 8px 10px;
	border-radius: 8px;
	font-weight: 700;
	display: inline-block;
}

.status.good {
	background: rgba(22, 163, 74, 0.12);
	color: var(--good);
	border: 1px solid rgba(22, 163, 74, 0.08);
}

.status.warn {
	background: rgba(245, 158, 11, 0.08);
	color: var(--warn);
	border: 1px solid rgba(245, 158, 11, 0.06);
}

.status.bad {
	background: rgba(239, 68, 68, 0.08);
	color: var(--bad);
	border: 1px solid rgba(239, 68, 68, 0.06);
}

.log {
	max-height: 120px;
	overflow: auto;
	font-size: 12px;
	color: var(--muted);
	background: rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	padding: 8px;
}

.footer {
	margin-top: 10px;
	font-size: 12px;
	color: var(--muted);
}

@media (max-width:820px) {
	.card {
		min-width: 240px;
		max-width: 320px;
	}
}