* { margin: 0; padding: 0; box-sizing: border-box; }
@font-face { font-family: race; src: url("assets/race.ttf"); }

body {
	background: black;
	color: white;
	font-family: sans-serif;
	min-height: 100vh;
	overflow: hidden;
}
canvas { position: fixed; inset: 0; cursor: none; }
.hidden { display: none !important; }

h1 { font-family: race; font-size: 6vh; color: orange; }
.sub { font-family: race; letter-spacing: .3em; margin-bottom: 3vh; }

button, input, select {
	font: inherit;
	border-radius: 6px;
	border: 1px solid #555;
	background: #222;
	color: white;
	padding: 8px 12px;
}
button { cursor: pointer; background: orange; color: black; border: none; font-weight: bold; transition: filter .2s; }
button:hover { filter: brightness(1.15); }
button.secondary { background: #444; color: white; }
button.mini { padding: 3px 8px; font-size: .8em; }
button:disabled { opacity: .4; cursor: default; }

.screen {
	position: fixed; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	background: radial-gradient(#1c3a2a, #000 70%);
	padding: 16px;
	text-align: center;
}
.screen label { display: flex; flex-direction: column; gap: 6px; }
.screen .row { display: flex; gap: 8px; }
#code { width: 7em; text-transform: uppercase; text-align: center; letter-spacing: .2em; }
.or { opacity: .5; }
.error { color: #ff6b6b; min-height: 1.2em; }
.help { max-width: 420px; opacity: .7; font-size: .9em; }
.small { font-size: .8em; opacity: .7; color: white; }

#panel {
	position: fixed; top: 10px; left: 10px;
	width: 240px;
	background: rgba(0, 0, 0, .75);
	border: 1px solid #444;
	border-radius: 10px;
	padding: 12px;
	display: flex; flex-direction: column; gap: 8px;
	font-size: .9em;
	z-index: 2;
}
#panel.right { left: auto; right: 10px; }
#panel.folded { width: auto; }
#panel.folded #panel-body { display: none; }
#panel-body { display: flex; flex-direction: column; gap: 8px; }
.room { display: flex; align-items: center; gap: 6px; }
#fold { margin-left: auto; }
#room-code { font-family: monospace; font-size: 1.3em; letter-spacing: .15em; color: orange; }
#track-name { font-family: race; }
#players { list-style: none; display: flex; flex-direction: column; gap: 4px; }
#players li { display: flex; align-items: center; gap: 6px; }
#players .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
#players .pname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#players .me .pname { font-weight: bold; }
#players .off { opacity: .4; }
#players .info { opacity: .8; font-variant-numeric: tabular-nums; }
#host-controls { display: flex; flex-direction: column; gap: 6px; }
.check { display: flex; gap: 6px; align-items: center; font-size: .85em; }

#banner {
	position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
	font-family: race; font-size: 10vh; color: white;
	text-shadow: 0 0 20px black, 0 0 6px black;
	pointer-events: none; text-align: center; z-index: 1;
}
#banner small { display: block; font-size: .35em; margin-top: 1vh; }

#toast {
	position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
	background: rgba(0,0,0,.8); padding: 8px 16px; border-radius: 6px; z-index: 3;
}