body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	margin: 20px;
	background-color: #121212;
	background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
					  radial-gradient(rgba(255,255,255,0.015) 1px, transparent 1px);
	background-size: 40px 40px;
	background-position: 0 0, 20px 20px;
	color: #f0f0f0;
}
#server-table td, #rankedonly-table td {
	vertical-align: middle;
}
.top-holder.gold {
	background: linear-gradient(135deg, #806c2e 0%, #5a4720 100%);
	box-shadow: 0 0 8px #806c2e88;
	border: 1px solid #a38b4d;
}

.top-holder.silver {
	background: linear-gradient(135deg, #6f6f6f 0%, #4a4a4a 100%);
	box-shadow: 0 0 8px #aaaaaa44;
	border: 1px solid #888;
}

.top-holder.bronze {
	background: linear-gradient(135deg, #6b4a2b 0%, #4a3220 100%);
	box-shadow: 0 0 8px #a5713c55;
	border: 1px solid #a5713c;
}

h1 {
	text-align: center;
	color: #ffffff;
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
}
#title-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 10px;
}

#bridget-sprite {
	height: 125px;
	image-rendering: pixelated;
	filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
	transition: transform 0.3s ease;
}
#global-records-list table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1em;
}
/* Makes map links stand out */
.map-link {
	color: #8cf;
	text-decoration: underline;
	cursor: pointer;
}
.map-link:hover {
	color: #acf;
}

/* Modal full-screen overlay */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}
.top-hold-container {
	display: flex;
	justify-content: center;
	gap: 2em;
	margin-bottom: 1em;
}

.top-holder {
	background: #222;
	border-radius: 16px;
	padding: 1em;
	text-align: center;
	width: 180px;
	box-shadow: 0 0 10px #fff2;
	transition: transform 0.2s;
}
.top-holder-wrapper {
	display: flex;
	gap: 2em;
	justify-content: center;
	margin-bottom: 1em;
}
.top-holder h3 {
	margin-bottom: 0.5em;
}

.top-holder.gold .player-name {
	color: gold;
}
.top-holder.silver .player-name {
	color: #c0c0c0;
}
.top-holder.bronze .player-name {
	color: #cd7f32;
}
.top-holder .rank-icon {
	font-size: 1.5em;
	display: block;
	margin-bottom: 0.2em;
}
#last-10-stat-changes {
	margin-bottom: 2em;
}
#last-10-stat-changes table {
	width: 100%;
	border-collapse: collapse;
}
#last-10-stat-changes th,
#last-10-stat-changes td {
	padding: 0.5em;
	border-bottom: 1px solid #333;
}

.top-holder:hover {
	transform: scale(1.05);
}
.top-holder img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	margin-bottom: 0.5em;
}
#global-leaderboard tbody tr.gold {
	background-color: #ffd70033; /* light gold */
	color: #ffd700;
	font-weight: bold;
}
#global-leaderboard tbody tr.silver {
	background-color: #c0c0c033; /* light silver */
	color: #c0c0c0;
	font-weight: bold;
}
#global-leaderboard tbody tr.bronze {
	background-color: #cd7f3233; /* light bronze */
	color: #cd7f32;
	font-weight: bold;
}

.top-holder .player-name {
	font-weight: bold;
	font-size: 1.2em;
	color: gold;
}
.top-holder .held-time {
	color: #aaa;
	font-size: 0.95em;
}

/* Modal content box */
.modal-content {
	background: #1e1e1e;
	color: #eee;
	padding: 2em;
	border-radius: 12px;
	max-height: 80vh;
	overflow-y: auto;
	width: 90%;
	max-width: 700px;
	position: relative;
	box-shadow: 0 0 30px #000;
}

/* Close button */
.modal-close {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	background: none;
	border: none;
	color: #fff;
	font-size: 1.5em;
	cursor: pointer;
}

#global-records-list th, #global-records-list td {
	padding: 0.5em;
	border-bottom: 1px solid #333;
	text-align: left;
}

#global-records-list td.time-cell {
	font-weight: bold;
	font-family: monospace;
	white-space: nowrap;
}

#global-records-list td.date-cell {
	max-width: 180px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#bridget-sprite:hover {
	transform: scale(1.1) rotate(2deg);
}

#bridget-sprite:hover {
	transform: scale(1.05) rotate(2deg);
}

#controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	margin: 20px auto;
}

#controls label {
	margin-right: 5px;
	color: #ccc;
}

#controls select {
	padding: 6px 10px;
	background-color: #1e1e1e;
	color: #f0f0f0;
	border: 1px solid #555;
	border-radius: 6px;
	transition: border 0.2s;
}
#controls select:focus {
	border-color: #888;
	outline: none;
}

#player-profile {
	display: flex;
	align-items: center;
	gap: 10px;
}

#player-avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 2px solid #666;
	object-fit: cover;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

#profile-name {
	font-size: 1.1em;
	font-weight: bold;
	color: #f0f0f0;
	text-shadow: 0 0 3px rgba(255, 255, 255, 0.1);
}

#chart-container, #records-section {
	margin-top: 40px;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	background: linear-gradient(to bottom, #1e1e1e, #161616);
	padding: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
	color: #f0f0f0;
}

th, td {
	padding: 10px;
	text-align: left;
	border-bottom: 1px solid #333;
}

th {
	background-color: #2a2a2a;
	color: #f0f0f0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

#skin-use h3 {
	color: #fff;
}

#skin-use ul {
	padding-left: 20px;
}

#skin-use li {
	margin-bottom: 4px;
}
#player-stats-container {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	gap: 20px;
	flex-wrap: wrap;
}

#player-stats-left, #player-stats-right {
	background: linear-gradient(to bottom, #1b1b1b, #141414);
	color: #ddd;
	padding: 15px;
	border-radius: 8px;
	flex: 1;
	min-width: 250px;
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

#player-stats-left ul, #player-stats-right ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.nav-button {
	display: inline-block;
	padding: 0.5em 1em;
	background-color: #333;
	color: white;
	text-decoration: none;
	border-radius: 6px;
	margin: 0.5em;
	transition: background 0.25s ease, transform 0.1s ease;
}

.nav-button:hover {
	background-color: #555;
	transform: translateY(-2px);
}

#records-table tr.current {
	color: gold;
	font-weight: bold;
	text-shadow: 0 0 4px gold;
}

#records-table tr.former {
	color: #666;
}