:root{
	--bg:#05060a;
	--surface:#0b0f15;
	--muted:#98a0ad;
	--text:#e6eef8;
	--accent:#60a5fa;
	--accent-contrast:#0b1220;
	--logo-size:36px;
	--radius:12px;
	--gap:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background:radial-gradient(1200px 600px at 10% 10%, rgba(9,30,66,0.12), transparent 15%), linear-gradient(180deg,var(--bg), #071024 80%);
	color:var(--text);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	line-height:1.4;
}

/* container */
.container{max-width:1100px;margin:0 auto;padding:20px}

/* header */
.site-header{background:transparent;border-bottom:1px solid rgba(255,255,255,0.03)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0}
.logo{font-weight:800;font-size:1.125rem;letter-spacing:0.2px;color:var(--text)}

/* nav */
.nav{
	display:flex;
	gap:12px;
	align-items:center;
}
.nav a{
	color:var(--accent-contrast);
	text-decoration:none;
	font-weight:600;
	padding:8px 10px;
	border-radius:6px;
	opacity:0.95;
}
.nav a:hover{background:rgba(255,255,255,0.08)}

/* menu toggle (mobile) */
.menu-toggle{
	display:none;
	background:transparent;
	border:0;
	color:var(--accent-contrast);
	font-size:1.2rem;
	padding:8px;
	border-radius:6px;
	cursor:pointer;
}
.menu-toggle:focus{outline:2px solid rgba(255,255,255,0.25)}

/* hero */
.hero{
	padding:28px 0;
}
.hero h2{margin:0 0 6px;font-size:1.5rem}
.lead{color:var(--muted);margin:0}

/* server cards */
.servers{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:16px;
	margin-top:12px;
}
.server-card{
	/* keep layout, add overlay & stacking for backgrounds */
	position:relative;
	overflow:hidden;
	color:var(--text);
	background-color:rgba(255,255,255,0.01);
	/* subtle default border / elevation */
	border:1px solid rgba(255,255,255,0.03);
}
/* place a dark overlay using pseudo element so text remains readable */
.server-card::before{
	content:'';
	position:absolute;
	inset:0;
	pointer-events:none;
	background:linear-gradient(180deg, rgba(2,6,23,0.35), rgba(2,6,23,0.45));
	z-index:0;
}
/* ensure children sit above background/overlay */
.server-card > * { position:relative; z-index:1 }

/* server header alignment and inline logo */
.server-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.server-header h3{display:flex;align-items:center;gap:10px;margin:0;font-size:1.05rem}

/* small game logo beside titles */
.game-logo{
	width:var(--logo-size);
	height:var(--logo-size);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	padding:4px;
	overflow:hidden;
	border-radius:6px;
	background:rgba(255,255,255,0.03);
	box-shadow:0 2px 8px rgba(2,6,23,0.4);
	flex:0 0 var(--logo-size);
}

/* ensure the actual <img> scales to fit the container while preserving aspect */
.server-header h3 img.game-logo{
	width:100%;
	height:100%;
	display:block;
	object-fit:contain;
}

/* status dot (visible and contrasting on dark backgrounds) */
.server-header .status{ margin-left:8px; }

/* base dot */
.status{
	width:12px;
	height:12px;
	border-radius:50%;
	display:inline-block;
	flex-shrink:0;
	transition:all .12s ease;
	box-shadow:0 0 0 6px rgba(0,0,0,0.12);
}

/* states */
.status.online{ background:#10b981; box-shadow:0 0 0 6px rgba(16,185,129,0.06); }
.status.offline{ background:#ef4444; box-shadow:0 0 0 6px rgba(239,68,68,0.06); }
.status.unknown{ background:#94a3b8; box-shadow:0 0 0 6px rgba(148,163,184,0.03); }

/* per-game themed backgrounds - replaced with JS-randomized images; keep gradient + fallback colors */
.server-card--minecraft{
	background-image: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.2));
 	background-size:cover;
 	background-position:center;
 	background-color:#163d24; /* fallback tint */
}
.server-card--gmod{
	background-image: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.2));
 	background-size:cover;
 	background-position:center;
 	background-color:#2b3850;
}
.server-card--rimworld{
	background-image: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.25));
 	background-size:cover;
 	background-position:center;
 	background-color:#3a2b22;
}
.server-card--space{
	background-image: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.25));
 	background-size:cover;
 	background-position:center;
 	background-color:#071025;
}

/* increase contrast on header text and small items on top of backgrounds */
.server-card .server-header h3,
.server-card .muted,
.server-card code {
	color: #f7fbff;
	text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.server-card code{
	background:rgba(255,255,255,0.03);
	border:1px solid rgba(255,255,255,0.04);
}

/* ip row */
.server-ip{
	display:flex;
	gap:8px;
	align-items:center;
	margin-top:10px;
}
.server-ip code{
	background:rgba(255,255,255,0.02);
	padding:6px 8px;
	border-radius:8px;
	border:1px solid rgba(255,255,255,0.03);
	font-family:SFMono-Regular,Menlo,Monaco,monospace;
	color:var(--text);
}
.btn{
	display:inline-block;
	background:var(--accent);
	color:#fff;
	padding:10px 14px;
	border-radius:10px;
	text-decoration:none;
	border:0;
	font-weight:600;
	cursor:pointer;
	transition:transform .08s ease,opacity .12s ease
}
.btn:hover{opacity:.95;transform:translateY(-1px)}
.btn-ghost{
	background:transparent;
	color:var(--accent);
	border:1px solid rgba(255,255,255,0.04);
	padding:8px 12px;
	border-radius:8px
}
.btn-sm{
	padding:6px 8px;
	font-size:0.9rem;
	border-radius:8px
}
.copy{
	background:rgba(255,255,255,0.03);
	color:var(--text);
	border:1px solid rgba(255,255,255,0.03)
}

/* panel */
.panel{
	margin-top:18px;
	background:transparent;
	padding:10px;
	border-radius:8px;
	color:var(--text)
}
.panel ul{margin:8px 0 0 20px;color:var(--muted)}

/* footer */
.site-footer{
	margin-top:32px;
	padding:22px 0;
	border-top:1px solid rgba(255,255,255,0.03)
}
.footer-row{
	display:flex;
	align-items:center;
	gap:12px;
	justify-content:center
}
.link{
	color:var(--muted);
	text-decoration:none
}
.link:hover{color:var(--text)}

/* utilities */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* modern section divider */
.divider{
	border:0;
	height:1px;
	margin:22px 0;
	background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.03) 60%, rgba(255,255,255,0) 100%);
	position:relative;
}
.divider::after{
	content:'';
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:10px;
	height:10px;
	border-radius:50%;
	background:var(--accent);
	box-shadow:0 0 0 6px rgba(96,165,250,0.06);
	border:1px solid rgba(255,255,255,0.04);
}
/* slightly tighter spacing on small screens */
@media (max-width:820px){
	.nav{display:none;position:absolute;left:0;right:0;top:64px;background:linear-gradient(180deg, rgba(108,92,231,0.98), #8f82ff);padding:12px;flex-direction:column;gap:8px;border-radius:0 0 12px 12px}
	.nav.open{display:flex}
	.menu-toggle{display:block}
	.inline-form{flex-direction:column;align-items:stretch}
	.inline-form input, .inline-form textarea, .inline-form select{width:100%}
	.container{padding:0 14px}
	.servers{grid-template-columns:1fr}
	.header-row{padding:12px 0}
	.divider{margin:16px 0}
}