* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #0e1116;
  color: #e6e6e6;
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}
#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: rgba(14,17,22,0.85);
  border-bottom: 1px solid #20262e;
  backdrop-filter: blur(6px);
}
.brand { font-weight: 600; letter-spacing: 0.5px; color: #9fdfff; }
.conn-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #c33; transition: background 200ms;
}
.conn-up { background: #4caf50; box-shadow: 0 0 6px #4caf50; }
#counts { color: #aaa; }
#clear {
  appearance: none;
  background: #2a2f37;
  color: #e6e6e6;
  border: 1px solid #3a3f47;
  border-radius: 4px;
  padding: 3px 10px;
  font: inherit;
  cursor: pointer;
}
#clear:hover { background: #383f49; }
#clear:active { background: #1f242b; }
#recent { color: #888; margin-left: auto; font-family: ui-monospace, monospace; font-size: 11px; }
#game { position: absolute; inset: 0; }