/* ===== Leaderboard ===== */

:root{
	--accent:#2bd9ff;
}

.hud{
	display: grid;
	font:16px "VT323",monospace;
	display:flex;
	flex-direction:column;
	gap:12px;
}

/* ===== Header leaderboard ===== */
.lb-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	flex-wrap:wrap;
	margin:8px 0 0 0;
}

.lb-header .brand{
	display:flex;
	align-items:center;
	gap:12px;
	min-width:0;
}


/* Leaderboard title */
.lb-title{
	font-family:"Press Start 2P", system-ui;
	font-size:30px;
	letter-spacing:2px;
	text-transform:uppercase;
	margin:0 auto;
	color:#8fe3ff;
	text-shadow:0 0 10px var(--accent),2px 2px 0 #001c3a;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

@media (max-width:560px){
  .lb-title{
    font-size:18px;
    line-height:1.2;
    white-space:normal;
    text-align:center;
  }
}

.table-wrap{
	background:var(--panel-grad);
	padding:0;
}

table{
	width:100%;
	border-collapse:separate;
	border-spacing:0;
}

thead th{
	font-family:"Press Start 2P";
	font-size:11px;
	letter-spacing:1px;
	text-transform:uppercase;
	padding:12px 10px;
	text-align:left;
	color:#bfe7ff;
}

tbody td{
	font-family:"VT323",monospace;
	font-size:24px;
	padding:10px 10px;
	border-top:1px solid #1e2a52;
}

tbody tr:nth-child(odd){
	background:rgba(255,255,255,0.02);
}

tbody tr:hover{
	background:rgba(43,217,255,0.06);
}

.rank{
	width:80px;
	text-align:center;
	padding-right:12px;
}

.token img{
	width:26px;
	height:26px;
	vertical-align:middle;
	margin-right:4px;
	image-rendering:crisp-edges;
}

.elo{
	width:80px;
}

tbody tr:nth-child(1) td{
	color:#ffe082;
	text-shadow:0 0 8px var(--accent2);
}

tbody tr:nth-child(2) td{
	color:#c9dafe;
}

tbody tr:nth-child(3) td{
	color:#a2ffd3;
}