body{
background:#111;
color:white;
font-family:Arial;
text-align:center;
}

.container{
max-width:900px;
margin:auto;
padding:20px;
}

.header{
font-size:28px;
margin-bottom:20px;
}

.scoreboard{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}

.player{
background:#1e1e1e;
padding:20px;
border-radius:10px;
}

.player.current{
border:3px solid #ff4444;
}

.name{
font-size:22px;
margin-bottom:10px;
}

.score{
font-size:60px;
font-weight:bold;
}

.darts{
margin-top:10px;
font-size:18px;
}

.avg{
margin-top:10px;
color:#ccc;
}

.checkout{
margin-top:30px;
font-size:22px;
color:#00ff88;
}

/* NAV BAR */
.nav {
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding:10px;
  background:#1a1a1a;
  border-bottom:1px solid #333;
  position:sticky;
  top:0;
  z-index:10;
}

.nav button {
  flex:1;
  margin:0 5px;
  padding:12px;
  font-size:16px;
  background:#222;
  color:white;
  border:1px solid #444;
  border-radius:8px;
}

.nav button:active {
  background:#333;
}

/* your board spacing so it doesn't hide under nav */
#board {
  padding:10px;
}