:root { --ink: #eaf2ff; --panel: rgba(12,10,26,.74); --purple: #8F72F2; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0a0714; overflow: hidden;
  font: 14px/1.4 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); }
#view { display: block; width: 100vw; height: 100vh; }

.overlay { position: fixed; inset: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #251c47, #0a0714 70%); z-index: 10; }
#joinForm { background: var(--panel); border: 1px solid #3a2f66; border-radius: 18px;
  padding: 28px 32px; width: min(92vw, 360px); text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.65), 0 0 60px rgba(143,114,242,.18); }
#joinForm img { display: block; margin: 0 auto 10px;
  filter: drop-shadow(0 0 22px rgba(143,114,242,.55)); }
#joinForm h1 { margin: 0; font-size: 26px; letter-spacing: 10px; color: var(--purple); }

#joinForm p { margin: 6px 0 20px; opacity: .6; font-size: 12px; }
#name { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #3a2f66;
  background: #140f26; color: var(--ink); font: inherit; text-align: center; }
#name:focus { outline: none; border-color: var(--purple); }
#colors { display: flex; gap: 8px; justify-content: center; margin: 16px 0 20px; }
#colors button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; }
#colors button[aria-pressed="true"] { border-color: #fff; transform: scale(1.15); }
#joinForm > button { width: 100%; padding: 12px; border: 0; border-radius: 10px;
  background: var(--purple); color: #120d22; font: inherit; font-weight: 700; letter-spacing: 2px;
  cursor: pointer; }

#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { position: absolute; background: var(--panel); border: 1px solid #2e2452;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  border-radius: 12px; padding: 10px 14px; backdrop-filter: blur(6px); }
#speedo { left: 20px; bottom: 20px; display: flex; align-items: baseline; gap: 6px; }
#speedo b { font-size: 30px; text-shadow: 0 0 18px rgba(143,114,242,.7); }
#speedo span { opacity: .5; font-size: 11px; }
#lapbox { left: 20px; top: 20px; letter-spacing: 2px; }
#lapbox b { font-size: 20px; color: var(--purple); }
#board { right: 20px; top: 20px; min-width: 170px; }
#board .p { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
#board .dot { width: 9px; height: 9px; border-radius: 50%; }
#board .lag { margin-left: auto; opacity: .45; font-size: 11px; }
#net { right: 20px; bottom: 20px; width: 190px; pointer-events: auto; }
#net .row { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
#net .row span { opacity: .5; width: 34px; }
#net .row i { margin-left: auto; opacity: .55; font-style: normal; }
#net label { display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 11px; opacity: .7; }
#net input { flex: 1; accent-color: #8F72F2; }
#help { left: 50%; bottom: 20px; transform: translateX(-50%); opacity: .5; font-size: 11px; }