:root {
	--bg-top: #141923;
	--bg-bottom: #070a10;
	--panel: #111722;
	--line: #2a3343;
	--text: #e8eefb;
	--muted: #8a95ab;
	--gold: #f5c453;
	--danger: #d45454;
	--ok: #4a4a4a;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: "Rajdhani", "Segoe UI", Tahoma, sans-serif;
	color: var(--text);
	background: radial-gradient(1200px 700px at 20% -10%, #22314d 0%, rgba(34, 49, 77, 0) 60%), linear-gradient(160deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

.page {
	max-width: 960px;
	margin: 0 auto;
	padding: 32px 20px 64px;
}

.top-mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 8px 0 24px;
}

.crown {
	width: clamp(72px, 12vw, 130px);
	height: auto;
	image-rendering: pixelated;
	filter: drop-shadow(0 8px 18px rgba(245, 196, 83, 0.32));
}

.top-initials {
	margin: 0;
	font-size: clamp(42px, 10.5vw, 111px);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: 0.06em;
	color: var(--gold);
	text-shadow: 0 6px 24px rgba(245, 196, 83, 0.25);
}

.panel {
	background: linear-gradient(180deg, rgba(17, 23, 34, 0.95), rgba(13, 18, 27, 0.95));
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

@media (min-width: 641px) {
	.panel {
		max-width: 480px;
		margin: 0 auto;
	}
}

.panel-head {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	align-items: center;
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	text-align: center;
}

.status {
	margin: 0;
	font-size: 14px;
	color: var(--muted);
}

.actions {
	display: flex;
	justify-content: center;
	width: 100%;
}

button {
	border: 1px solid #3b4b67;
	background: #1b273b;
	color: #5f5f5f;
	font: inherit;
	font-size: 0.75em;
	font-weight: 700;
	padding: 6px 9px;
	border-radius: 8px;
	cursor: pointer;
}

button:hover {
	background: #223450;
}

.table-wrap {
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	min-width: 420px;
}

thead th {
	text-align: left;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 8px 5px;
	border-bottom: 1px solid var(--line);
}

tbody td {
	padding: 8px 5px;
	border-bottom: 1px solid rgba(42, 51, 67, 0.55);
	font-size: 16px;
	font-weight: 600;
}

tbody tr.top-row td {
	background: #f5c453;
	color: #000000 !important;
	-webkit-text-fill-color: #000000;
	font-weight: 700;
	box-shadow: inset 0 0 14px rgba(245, 196, 83, 0.45);
}

tbody tr.silver-row td {
	background: #6f8fb8;
	color: #000000 !important;
	-webkit-text-fill-color: #000000;
	box-shadow: inset 0 0 14px rgba(90, 126, 182, 0.5);
}

tbody tr.bronze-row td {
	background: #c7854c;
	color: #000000 !important;
	-webkit-text-fill-color: #000000;
	box-shadow: inset 0 0 14px rgba(199, 133, 76, 0.45);
}

tbody tr.empty td {
	color: var(--muted);
	font-weight: 600;
}

.status.ok {
	color: var(--ok);
}

.status.error {
	color: var(--danger);
}

@media (max-width: 640px) {
	.page {
		padding: 20px 12px 36px;
	}

	.top-initials {
		font-size: clamp(63px, 21vw, 167px);
	}

	.panel-head {
		flex-direction: column;
		align-items: center;
	}
}